<!DOCTYPE html>
<html lang="en" xmlns:x-transition="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>HOPPINAI</title>
    <link rel="icon" type="image/png" href="https://hoppinzq.com/zui/static/favicon/favicon.ico">
    <link rel="stylesheet" href="https://hoppinzq.com/static/css/plugins/editormd.min.css"/>
    <link rel="stylesheet" href="static/css/app.css">
    <script src="static/js/app.js" defer=""></script>
    <link href="static/css/css2.css" rel="stylesheet">
    <script>localStorage.getItem("_x_darkMode_on") === "true" && document.documentElement.classList.add("dark");</script>
</head>

<body x-data="" x-bind="$store.global.documentBody" class="has-min-sidebar is-sidebar-open is-header-blur">
<div class="app-preloader fixed z-50 grid h-full w-full place-content-center bg-slate-50 dark:bg-navy-900">
    <div class="app-preloader-inner relative inline-block h-48 w-48"></div>
</div>
<div id="root" class="min-h-100vh flex grow bg-slate-50 dark:bg-navy-900" x-cloak="">
    <div class="sidebar print:hidden">
        <div class="main-sidebar">
            <div class="flex h-full w-full flex-col items-center border-r border-slate-150 bg-white dark:border-navy-700 dark:bg-navy-800">
                <div class="flex pt-4">
                    <a href="javascript:;" x-tooltip.placement.right-start.success="'皮皮Z，我们走！'">
                        <img class="h-11 w-11 transition-transform duration-500 ease-in-out hover:rotate-[360deg]"
                             src="static/image/hoppinzq_dignitas1.jpeg" alt="logo">
                    </a>
                </div>
                <div class="is-scrollbar-hidden flex grow flex-col space-y-4 overflow-y-auto pt-6">
                    <a href="#"
                       @click="Toastify({
                                        text: '不能打开该页面，原因是：没有登录或没有权限或没有开放',
                                        duration: 5000,
                                        close: false,
                                        style:{
                                            'color':'#ffffff'
                                        },
                                        gravity: 'top',
                                        className:'toastify-center bg-error',
                                    }).showToast();"
                       class="flex h-11 w-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                       x-tooltip.placement.right="'总览'">
                        <svg class="h-7 w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24">
                            <path fill="currentColor" fill-opacity=".3"
                                  d="M5 14.059c0-1.01 0-1.514.222-1.945.221-.43.632-.724 1.453-1.31l4.163-2.974c.56-.4.842-.601 1.162-.601.32 0 .601.2 1.162.601l4.163 2.974c.821.586 1.232.88 1.453 1.31.222.43.222.935.222 1.945V19c0 .943 0 1.414-.293 1.707C18.414 21 17.943 21 17 21H7c-.943 0-1.414 0-1.707-.293C5 20.414 5 19.943 5 19v-4.94Z"></path>
                            <path fill="currentColor"
                                  d="M3 12.387c0 .267 0 .4.084.441.084.041.19-.04.4-.204l7.288-5.669c.59-.459.885-.688 1.228-.688.343 0 .638.23 1.228.688l7.288 5.669c.21.163.316.245.4.204.084-.04.084-.174.084-.441v-.409c0-.48 0-.72-.102-.928-.101-.208-.291-.355-.67-.65l-7-5.445c-.59-.459-.885-.688-1.228-.688-.343 0-.638.23-1.228.688l-7 5.445c-.379.295-.569.442-.67.65-.102.208-.102.448-.102.928v.409Z"></path>
                            <path fill="currentColor"
                                  d="M11.5 15.5h1A1.5 1.5 0 0 1 14 17v3.5h-4V17a1.5 1.5 0 0 1 1.5-1.5Z"></path>
                            <path fill="currentColor"
                                  d="M17.5 5h-1a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5Z"></path>
                        </svg>
                    </a>
                    <a href="zq-apps-list.html"
                       class="flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-navy-600 dark:text-accent-light dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                       x-tooltip.placement.right="'应用'">
                        <svg class="h-7 w-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5 8H19V16C19 17.8856 19 18.8284 18.4142 19.4142C17.8284 20 16.8856 20 15 20H9C7.11438 20 6.17157 20 5.58579 19.4142C5 18.8284 5 17.8856 5 16V8Z"
                                  fill="currentColor" fill-opacity="0.3"></path>
                            <path d="M12 8L11.7608 5.84709C11.6123 4.51089 10.4672 3.5 9.12282 3.5V3.5C7.68381 3.5 6.5 4.66655 6.5 6.10555V6.10555C6.5 6.97673 6.93539 7.79026 7.66025 8.2735L9.5 9.5"
                                  stroke="currentColor" stroke-linecap="round"></path>
                            <path d="M12 8L12.2392 5.84709C12.3877 4.51089 13.5328 3.5 14.8772 3.5V3.5C16.3162 3.5 17.5 4.66655 17.5 6.10555V6.10555C17.5 6.97673 17.0646 7.79026 16.3397 8.2735L14.5 9.5"
                                  stroke="currentColor" stroke-linecap="round"></path>
                            <rect x="4" y="8" width="16" height="3" rx="1" fill="currentColor"></rect>
                            <path d="M12 11V15" stroke="currentColor" stroke-linecap="round"></path>
                        </svg>
                    </a>
                    <a href="#"
                       @click="Toastify({
                                        text: '不能打开该页面，原因是：没有登录或没有权限或没有开放',
                                        duration: 5000,
                                        close: false,
                                        style:{
                                            'color':'#ffffff'
                                        },
                                        gravity: 'top',
                                        className:'toastify-center bg-error',
                                    }).showToast();"
                       class="flex h-11 w-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                       x-tooltip.placement.right="'布局'">
                        <svg class="h-7 w-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.85714 3H4.14286C3.51167 3 3 3.51167 3 4.14286V9.85714C3 10.4883 3.51167 11 4.14286 11H9.85714C10.4883 11 11 10.4883 11 9.85714V4.14286C11 3.51167 10.4883 3 9.85714 3Z"
                                  fill="currentColor"></path>
                            <path d="M9.85714 12.8999H4.14286C3.51167 12.8999 3 13.4116 3 14.0428V19.757C3 20.3882 3.51167 20.8999 4.14286 20.8999H9.85714C10.4883 20.8999 11 20.3882 11 19.757V14.0428C11 13.4116 10.4883 12.8999 9.85714 12.8999Z"
                                  fill="currentColor" fill-opacity="0.3"></path>
                            <path d="M19.757 3H14.0428C13.4116 3 12.8999 3.51167 12.8999 4.14286V9.85714C12.8999 10.4883 13.4116 11 14.0428 11H19.757C20.3882 11 20.8999 10.4883 20.8999 9.85714V4.14286C20.8999 3.51167 20.3882 3 19.757 3Z"
                                  fill="currentColor" fill-opacity="0.3"></path>
                            <path d="M19.757 12.8999H14.0428C13.4116 12.8999 12.8999 13.4116 12.8999 14.0428V19.757C12.8999 20.3882 13.4116 20.8999 14.0428 20.8999H19.757C20.3882 20.8999 20.8999 20.3882 20.8999 19.757V14.0428C20.8999 13.4116 20.3882 12.8999 19.757 12.8999Z"
                                  fill="currentColor" fill-opacity="0.3"></path>
                        </svg>
                    </a>
                    <a href="#"
                       @click="Toastify({
                                        text: '不能打开该页面，原因是：没有登录或没有权限或没有开放',
                                        duration: 5000,
                                        close: false,
                                        style:{
                                            'color':'#ffffff'
                                        },
                                        gravity: 'top',
                                        className:'toastify-center bg-error',
                                    }).showToast();"
                       class="flex h-11 w-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                       x-tooltip.placement.right="'表单'">
                        <svg class="h-7 w-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-opacity="0.25"
                                  d="M21.0001 16.05V18.75C21.0001 20.1 20.1001 21 18.7501 21H6.6001C6.9691 21 7.3471 20.946 7.6981 20.829C7.7971 20.793 7.89609 20.757 7.99509 20.712C8.31009 20.586 8.61611 20.406 8.88611 20.172C8.96711 20.109 9.05711 20.028 9.13811 19.947L9.17409 19.911L15.2941 13.8H18.7501C20.1001 13.8 21.0001 14.7 21.0001 16.05Z"
                                  fill="currentColor"></path>
                            <path fill-opacity="0.5"
                                  d="M17.7324 11.361L15.2934 13.8L9.17334 19.9111C9.80333 19.2631 10.1993 18.372 10.1993 17.4V8.70601L12.6384 6.26701C13.5924 5.31301 14.8704 5.31301 15.8244 6.26701L17.7324 8.17501C18.6864 9.12901 18.6864 10.407 17.7324 11.361Z"
                                  fill="currentColor"></path>
                            <path d="M7.95 3H5.25C3.9 3 3 3.9 3 5.25V17.4C3 17.643 3.02699 17.886 3.07199 18.12C3.09899 18.237 3.12599 18.354 3.16199 18.471C3.20699 18.606 3.252 18.741 3.306 18.867C3.315 18.876 3.31501 18.885 3.31501 18.885C3.32401 18.885 3.32401 18.885 3.31501 18.894C3.44101 19.146 3.585 19.389 3.756 19.614C3.855 19.731 3.95401 19.839 4.05301 19.947C4.15201 20.055 4.26 20.145 4.377 20.235L4.38601 20.244C4.61101 20.415 4.854 20.559 5.106 20.685C5.115 20.676 5.11501 20.676 5.11501 20.685C5.25001 20.748 5.385 20.793 5.529 20.838C5.646 20.874 5.76301 20.901 5.88001 20.928C6.11401 20.973 6.357 21 6.6 21C6.969 21 7.347 20.946 7.698 20.829C7.797 20.793 7.89599 20.757 7.99499 20.712C8.30999 20.586 8.61601 20.406 8.88601 20.172C8.96701 20.109 9.05701 20.028 9.13801 19.947L9.17399 19.911C9.80399 19.263 10.2 18.372 10.2 17.4V5.25C10.2 3.9 9.3 3 7.95 3ZM6.6 18.75C5.853 18.75 5.25 18.147 5.25 17.4C5.25 16.653 5.853 16.05 6.6 16.05C7.347 16.05 7.95 16.653 7.95 17.4C7.95 18.147 7.347 18.75 6.6 18.75Z"
                                  fill="currentColor"></path>
                        </svg>
                    </a>
                    <a href="#"
                       @click="Toastify({
                                        text: '不能打开该页面，原因是：没有登录或没有权限或没有开放',
                                        duration: 5000,
                                        close: false,
                                        style:{
                                            'color':'#ffffff'
                                        },
                                        gravity: 'top',
                                        className:'toastify-center bg-error',
                                    }).showToast();"
                       class="flex h-11 w-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                       x-tooltip.placement.right="'组件'">
                        <svg class="h-7 w-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-opacity="0.5"
                                  d="M14.2498 16C14.2498 17.5487 13.576 18.9487 12.4998 19.9025C11.5723 20.7425 10.3473 21.25 8.99976 21.25C6.10351 21.25 3.74976 18.8962 3.74976 16C3.74976 13.585 5.39476 11.5375 7.61726 10.9337C8.22101 12.4562 9.51601 13.6287 11.1173 14.0662C11.5548 14.1887 12.0185 14.25 12.4998 14.25C12.981 14.25 13.4448 14.1887 13.8823 14.0662C14.1185 14.6612 14.2498 15.3175 14.2498 16Z"
                                  fill="currentColor"></path>
                            <path d="M17.75 9.00012C17.75 9.68262 17.6187 10.3389 17.3825 10.9339C16.7787 12.4564 15.4837 13.6289 13.8825 14.0664C13.445 14.1889 12.9813 14.2501 12.5 14.2501C12.0187 14.2501 11.555 14.1889 11.1175 14.0664C9.51625 13.6289 8.22125 12.4564 7.6175 10.9339C7.38125 10.3389 7.25 9.68262 7.25 9.00012C7.25 6.10387 9.60375 3.75012 12.5 3.75012C15.3962 3.75012 17.75 6.10387 17.75 9.00012Z"
                                  fill="currentColor"></path>
                            <path fill-opacity="0.3"
                                  d="M21.25 16C21.25 18.8962 18.8962 21.25 16 21.25C14.6525 21.25 13.4275 20.7425 12.5 19.9025C13.5763 18.9487 14.25 17.5487 14.25 16C14.25 15.3175 14.1187 14.6612 13.8825 14.0662C15.4837 13.6287 16.7787 12.4562 17.3825 10.9337C19.605 11.5375 21.25 13.585 21.25 16Z"
                                  fill="currentColor"></path>
                        </svg>
                    </a>
                    <a href="#"
                       @click="Toastify({
                                        text: '不能打开该页面，原因是：没有登录或没有权限或没有开放',
                                        duration: 5000,
                                        close: false,
                                        style:{
                                            'color':'#ffffff'
                                        },
                                        gravity: 'top',
                                        className:'toastify-center bg-error',
                                    }).showToast();"
                       class="flex h-11 w-11 items-center justify-center rounded-lg outline-none transition-colors duration-200 hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                       x-tooltip.placement.right="'元素'">
                        <svg class="h-7 w-7" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.3111 14.75H5.03356C3.36523 14.75 2.30189 12.9625 3.10856 11.4958L5.24439 7.60911L7.24273 3.96995C8.07689 2.45745 10.2586 2.45745 11.0927 3.96995L13.1002 7.60911L14.0627 9.35995L15.2361 11.4958C16.0427 12.9625 14.9794 14.75 13.3111 14.75Z"
                                  fill="currentColor"></path>
                            <path fill-opacity="0.3"
                                  d="M21.1667 15.2083C21.1667 18.4992 18.4992 21.1667 15.2083 21.1667C11.9175 21.1667 9.25 18.4992 9.25 15.2083C9.25 15.0525 9.25917 14.9058 9.26833 14.75H13.3108C14.9792 14.75 16.0425 12.9625 15.2358 11.4958L14.0625 9.36C14.4292 9.28666 14.8142 9.25 15.2083 9.25C18.4992 9.25 21.1667 11.9175 21.1667 15.2083Z"
                                  fill="currentColor"></path>
                        </svg>
                    </a>
                </div>
                <div class="flex flex-col items-center space-y-3 py-3 div-auth"></div>
            </div>
        </div>
        <div class="sidebar-panel">
            <div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
                <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
                    <div class="flex items-center">
                        <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
                            <div class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                                </svg>
                            </div>
                        </div>
                        <p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
                            ChatZQ
                        </p>
                    </div>
                    <button @click="$store.global.isSidebarExpanded = false"
                            class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15 19l-7-7 7-7"></path>
                        </svg>
                    </button>
                </div>
                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
                    <div>
                        <div class="flex items-center justify-between px-4">
                            <span class="text-xs+ font-medium uppercase">知识库</span>
                            <div class="-mr-1.5 flex">
                                <button onclick="$('.chat-info-btn').click();$('#tabKnowledge').click();"
                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
                                         viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="swiper px-4"
                             x-init="$nextTick(()=>$el._x_swiper= new Swiper($el,{  slidesPerView: 'auto', spaceBetween:10, slidesPerGroup:3}))">
                            <div class="swiper-wrapper mt-1 swiper-knowledge"></div>
                        </div>
                    </div>
                    <div class="mt-4 flex px-4">
                        <label class="relative mr-1.5 flex">
                            <input class="form-input peer h-8 w-full rounded-lg bg-slate-150 px-3 py-2 pl-9 text-xs+ ring-primary/50 placeholder:text-slate-400 hover:bg-slate-200 focus:ring dark:bg-navy-900/90 dark:ring-accent/50 dark:placeholder:text-navy-300 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
                                   placeholder="搜索聊天内容" type="text">
                            <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-colors duration-200"
                                     fill="currentColor"
                                     viewbox="0 0 24 24">
                                    <path d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"></path>
                                </svg>
                            </span>
                        </label>
                        <div x-data="usePopper({
                                   offset: 12,
                                   placement: 'auto',
                                   modifiers: [
                                      {name: 'preventOverflow', options: {padding: 10}}
                                   ]
                                })"
                             @click.outside="isShowPopper && (isShowPopper = false)"
                             class="flex"
                        >
                            <button class="btn -mr-2 h-8 w-8 shrink-0 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25"
                                    x-ref="popperRef"
                                    @click="isShowPopper = !isShowPopper"
                            >
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor" stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"
                                          d="M22 6.5h-9.5M6 6.5H2M9 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM22 17.5h-6M9.5 17.5H2M13 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5z"></path>
                                </svg>
                            </button>
                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                <div class="popper-box max-w-[16rem]">
                                    <div
                                            class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700"
                                    >
                                        <h3
                                                class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
                                        >
                                            检索内容
                                        </h3>
                                        <div
                                                class="mt-4 flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
                                        >
                                            <label class="inline-flex items-center space-x-2">
                                                <input
                                                        checked
                                                        class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                                                        type="checkbox"
                                                />
                                                <p>对话标题</p>
                                            </label>
                                            <label class="inline-flex items-center space-x-2">
                                                <input
                                                        checked
                                                        class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                                                        type="checkbox"
                                                />
                                                <p>对话内容</p>
                                            </label>
                                            <label class="inline-flex items-center space-x-2">
                                                <input
                                                        class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                                                        type="checkbox"
                                                />
                                                <p>知识库</p>
                                            </label>
                                        </div>
                                        <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
                                        <div
                                                class="flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
                                        >
                                            <label class="inline-flex items-center space-x-2">
                                                <input
                                                        checked
                                                        class="form-checkbox is-basic h-5 w-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                                                        type="checkbox"
                                                />
                                                <p>按创建时间排序</p>
                                            </label>
                                        </div>
                                        <button
                                                @click="isShowPopper=false"
                                                class="btn mt-4 h-8 w-full rounded-md bg-primary px-4 text-xs+ font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
                                        >
                                            保存
                                        </button>
                                    </div>
                                    <div class="h-4 w-4" data-popper-arrow>
                                        <svg
                                                viewBox="0 0 16 9"
                                                xmlns="http://www.w3.org/2000/svg"
                                                class="absolute h-4 w-4"
                                                fill="currentColor"
                                        >
                                            <path
                                                    class="text-slate-150 dark:text-navy-600"
                                                    d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
                                            />
                                            <path
                                                    class="text-white dark:text-navy-700"
                                                    d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
                                            />
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="is-scrollbar-hidden mt-3 relative grow flex-col overflow-y-auto">
                        <div class="model-loader chat-left-title-loader">
                            <div class="flex items-center justify-center h-100">
                                <div class="flex gap-2">
                                    <div class="spinner h-5 w-5 animate-spin rounded-full border-2 border-slate-150 border-r-slate-400 dark:border-navy-500 dark:border-r-navy-300"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center justify-between px-4">
                            <span class="text-xs+ font-medium uppercase">对话</span>
                            <div class="-mr-1.5 flex">
                                <button @click="initFirstChat()"
                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none"
                                         viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="chat-left-title"></div>
                    </div>
                    <div class="flex h-12 shrink-0 justify-between border-t border-slate-150 px-1.5 py-1 dark:border-navy-600">
                        <a href="#" x-tooltip="'你的对话'"
                           class="btn h-9 w-9 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewbox="0 0 20 20"
                                 fill="currentColor">
                                <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"></path>
                                <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"></path>
                            </svg>
                        </a>
                        <a href="#"
                           @click="Toastify({
                                    text: '该栏目下无对话',
                                    duration: 5000,
                                    close: false,
                                    style:{
                                        'color':'#ffffff'
                                    },
                                    gravity: 'top',
                                    className:'toastify-center bg-error',
                                }).showToast();"
                           x-tooltip="'其他人分享'"
                           class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
                            <i class="fa fa-share"></i>
                        </a>
                        <a href="#"
                           @click="Toastify({
                                    text: '该栏目下无对话',
                                    duration: 5000,
                                    close: false,
                                    style:{
                                        'color':'#ffffff'
                                    },
                                    gravity: 'top',
                                    className:'toastify-center bg-error',
                                }).showToast();"
                           x-tooltip="'收藏'"
                           class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
                            <i class="fa fa-star"></i>
                        </a>
                        <a href="#"
                           @click="Toastify({
                                    text: '该栏目下无对话',
                                    duration: 5000,
                                    close: false,
                                    style:{
                                        'color':'#ffffff'
                                    },
                                    gravity: 'top',
                                    className:'toastify-center bg-error',
                                }).showToast();"
                           x-tooltip="'话题'"
                           class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24"
                                 stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
                            </svg>
                        </a>
                        <a href="#" x-tooltip="'更多分类'"
                           class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24"
                                 stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="sidebar-panel-min">
            <div class="flex h-full flex-col bg-white dark:bg-navy-750">
                <div class="flex h-18 shrink-0 items-center justify-center">
                    <div class="avatar flex h-10 w-10">
                        <div class="is-initial is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                            <svg class="h-5 w-5" viewbox="0 0 24 24" fill="none" stroke="currentColor"
                                 xmlns="http://www.w3.org/2000/svg" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
                    <div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
                        <ul class="mt-2 flex flex-col items-center justify-center space-y-1">
                            <li>
                                <a href="#"
                                   class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
                                         viewbox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
                                    </svg>
                                </a>
                            </li>
                            <li>
                                <a href="#"
                                   class="btn h-10 w-10 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
                                         viewbox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                    </svg>
                                </a>
                            </li>
                        </ul>
                        <div class="my-4 mx-4 h-px shrink-0 bg-slate-200 dark:bg-navy-500"></div>
                        <div class="chat-left-sm-title flex flex-col"></div>
                    </div>
                    <div class="flex flex-col items-center justify-center py-3">
                        <div x-data="usePopper({placement:'right-start',offset:4})"
                             @click.outside="isShowPopper && (isShowPopper = false)" class="inline-flex">
                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
                                    class="btn h-10 w-10 rounded-full border border-slate-200 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                                </svg>
                            </button>
                            <template x-teleport="#x-teleport-target">
                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                    <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                                        <ul>
                                            <li>
                                                <a href="#"
                                                   class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    新增
                                                </a>
                                            </li>

                                        </ul>
                                        <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
                                        <ul>
                                            <li>
                                                <a href="#"
                                                   @click="$store.global.isSidebarExpanded = !$store.global.isSidebarExpanded"
                                                   class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    展开
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div x-show="$store.global.isRightSidebarExpanded"
         @keydown.window.escape="$store.global.isRightSidebarExpanded = false">
        <div class="fixed inset-0 z-[150] bg-slate-900/60 transition-opacity duration-200"
             @click="$store.global.isRightSidebarExpanded = false" x-show="$store.global.isRightSidebarExpanded"
             x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"></div>
        <div class="fixed right-0 top-0 z-[151] h-full w-full sm:w-100">
            <div x-data="{activeTab:'tabQA'}"
                 class="relative flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-750"
                 x-show="$store.global.isRightSidebarExpanded" x-transition:enter="ease-out"
                 x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
                 x-transition:leave="ease-in" x-transition:leave-start="translate-x-0"
                 x-transition:leave-end="translate-x-full">
                <div class="flex items-center justify-between py-2 px-4">
                    <p x-show="activeTab === 'tabQA'" class="flex shrink-0 items-center space-x-1.5">
                        <i class="fa fa-pencil"></i>
                        <span class="text-xs">QA</span>
                    </p>
                    <p x-show="activeTab === 'tabDoc'" class="flex shrink-0 items-center space-x-1.5">
                        <i class="fa fa-folder"></i>
                        <span class="text-xs">文档</span>
                    </p>
                    <p x-show="activeTab === 'tabFile'" class="flex shrink-0 items-center space-x-1.5">
                        <i class="fa fa-check-circle"></i>
                        <span class="text-xs">文档解析</span>
                    </p>
                    <button @click="$store.global.isRightSidebarExpanded=false"
                            class="btn -mr-1 h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div x-show="activeTab === 'tabQA'" x-transition:enter="transition-all duration-500 easy-in-out"
                     x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
                     x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                     class="is-scrollbar-hidden overflow-y-auto overscroll-contain pt-1">
                    <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
                        <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            QA问答对
                        </h2>
                        <div x-data="usePopper({placement:'bottom-end',offset:4})"
                             @click.outside="isShowPopper && (isShowPopper = false)" class="inline-flex">
                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
                                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                                </svg>
                            </button>
                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                                    <ul>
                                        <li>
                                            <div x-data="{showModal:false}">
                                                <a href="#" @click="showModal = true,openQAModal()"
                                                   class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">新增</a>
                                                <template x-teleport="#x-teleport-target">
                                                    <div
                                                            class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                                            x-show="showModal"
                                                            role="dialog"
                                                            @keydown.window.escape="showModal = false"
                                                    >
                                                        <div
                                                                class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                                                @click="showModal = false"
                                                                x-show="showModal"
                                                                x-transition:enter="ease-out"
                                                                x-transition:enter-start="opacity-0"
                                                                x-transition:enter-end="opacity-100"
                                                                x-transition:leave="ease-in"
                                                                x-transition:leave-start="opacity-100"
                                                                x-transition:leave-end="opacity-0"></div>
                                                        <div
                                                                class="relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
                                                                x-show="showModal"
                                                                x-transition:enter="easy-out"
                                                                x-transition:enter-start="opacity-0 scale-95"
                                                                x-transition:enter-end="opacity-100 scale-100"
                                                                x-transition:leave="easy-in"
                                                                x-transition:leave-start="opacity-100 scale-100"
                                                                x-transition:leave-end="opacity-0 scale-95">
                                                            <div class="model-loader chat-qa-title-loader">
                                                                <div class="flex items-center justify-center h-100">
                                                                    <div class="flex gap-2">
                                                                        <div class="spinner h-5 w-5 animate-spin rounded-full border-2 border-slate-150 border-r-slate-400 dark:border-navy-500 dark:border-r-navy-300"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                                                                <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                                                    新增问答对
                                                                </h3>
                                                                <button
                                                                        @click="showModal = !showModal"
                                                                        class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                                                                >
                                                                    <svg
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            class="h-4.5 w-4.5"
                                                                            fill="none"
                                                                            viewBox="0 0 24 24"
                                                                            stroke="currentColor"
                                                                            stroke-width="2"
                                                                    >
                                                                        <path
                                                                                stroke-linecap="round"
                                                                                stroke-linejoin="round"
                                                                                d="M6 18L18 6M6 6l12 12"
                                                                        ></path>
                                                                    </svg>
                                                                </button>
                                                            </div>
                                                            <div class="px-4 py-4 sm:px-5">
                                                                <p>
                                                                    当需要添加新的知识点和对应的问答对时使用，比如为产品添加新的常见问题解答。
                                                                    支持Excel导入多条问答对，演示期间不支持。
                                                                </p>
                                                                <div class="mt-4 space-y-4">
                                                                    <label class="block">
                                                                        <span>问题:<span
                                                                                class="text-error"> *</span></span>
                                                                        <input id="form-qa-question"
                                                                               class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                                               placeholder="Question"
                                                                               type="text"/>
                                                                    </label>
                                                                    <label class="block">
                                                                        <span>答案:<span
                                                                                class="text-error"> *</span></span>
                                                                        <textarea
                                                                                id="form-qa-answer"
                                                                                rows="4"
                                                                                placeholder="Answer"
                                                                                class="form-textarea mt-1.5 w-full resize-none rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                                        ></textarea>
                                                                    </label>
                                                                    <label class="block">
                                                                        <span>选择一个属性:</span>
                                                                        <select class="mt-1.5 w-full form-qa-attr"
                                                                                val="0">
                                                                            <option value="0">不选择属性</option>
                                                                        </select>
                                                                    </label>
                                                                    <label class="block">
                                                                        <span>选择标签（可多个）:</span>
                                                                        <select
                                                                                class="mt-1.5 w-full form-qa-label"
                                                                                multiple
                                                                                placeholder="选择一个标签"
                                                                                autocomplete="off">
                                                                        </select>
                                                                    </label>
                                                                    <div class="space-x-2 text-right">
                                                                        <button
                                                                                @click="showModal = false"
                                                                                class="btn btn-qa-modal-cancel min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                                                            取消
                                                                        </button>
                                                                        <button
                                                                                class="btn btn-qa-modal-add min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                                                            新增
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>
                                            </div>
                                        </li>
                                    </ul>
                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
                                    <ul>
                                        <li>
                                            <a href="#"
                                               @click="Toastify({
                                                    text: '您不能重载对话，原因是：没有登录或没有权限。重载的含义是将大模型里的问答对与本地数据库保存的问答对同步',
                                                    duration: 5000,
                                                    close: false,
                                                    style:{
                                                        'color':'#ffffff'
                                                    },
                                                    gravity: 'top',
                                                    className:'toastify-center bg-error',
                                                }).showToast();"
                                               class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                重载
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label class="relative flex px-3">
                        <input class="form-input peer h-8 w-full rounded-lg bg-slate-150 px-3 py-2 pl-9 text-xs+ ring-primary/50 placeholder:text-slate-400 hover:bg-slate-200 focus:ring dark:bg-navy-900/90 dark:ring-accent/50 dark:placeholder:text-navy-300 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
                               placeholder="搜索问题对" type="text">
                        <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 transition-colors duration-200"
                                 fill="currentColor" viewBox="0 0 24 24">
                                <path d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"></path>
                            </svg>
                        </span>
                    </label>
                    <div class="mt-4" id="table-knowledge-qa"></div>
                </div>
                <div x-show="activeTab === 'tabDoc'" x-transition:enter="transition-all duration-500 easy-in-out"
                     x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
                     x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                     class="is-scrollbar-hidden overflow-y-auto overscroll-contain px-3 pt-1">
                    <div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
                        <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            Doc文档解析
                        </h2>
                        <div x-data="usePopper({placement:'bottom-end',offset:4})"
                             @click.outside="isShowPopper && (isShowPopper = false)" class="inline-flex">
                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
                                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                                </svg>
                            </button>
                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                                    <ul>
                                        <li>
                                            <a href="#" @click="activeTab = 'tabFile'"
                                               class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">新增</a>
                                        </li>
                                    </ul>
                                    <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
                                    <ul>
                                        <li>
                                            <a href="#"
                                               @click="Toastify({
                                                    text: '您不能重载对话，原因是：没有登录或没有权限。重载的含义是将大模型里的问答对与本地数据库保存的问答对同步',
                                                    duration: 5000,
                                                    close: false,
                                                    style:{
                                                        'color':'#ffffff'
                                                    },
                                                    gravity: 'top',
                                                    className:'toastify-center bg-error',
                                                }).showToast();"
                                               class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                重载
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label class="relative flex my-3">
                        <input class="form-input peer h-8 w-full rounded-lg bg-slate-150 px-3 py-2 pl-9 text-xs+ ring-primary/50 placeholder:text-slate-400 hover:bg-slate-200 focus:ring dark:bg-navy-900/90 dark:ring-accent/50 dark:placeholder:text-navy-300 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
                               placeholder="搜索文档" type="text">
                        <span class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                                <svg xmlns="http://www.w3.org/2000/svg"
                                     class="h-4.5 w-4.5 transition-colors duration-200"
                                     fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"></path>
                                </svg>
                            </span>
                    </label>
                    <div class="mt-4" id="table-knowledge-doc"></div>
                </div>
                <div x-show="activeTab === 'tabFile'" x-transition:enter="transition-all duration-500 easy-in-out"
                     x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
                     x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                     class="is-scrollbar-hidden overflow-y-auto overscroll-contain pt-1">
                    <div class="mt-5 px-3">
                        <p class="mt-1">支持的文件类型：</p>
                        <p>PDF、DOC、DOCX、XLS、XLSX、PPT、PPTX、MD、TXT、PNG、JPG、JPEG、CSV</p>
                        <p class="my-1">支持的文件大小：</p>
                        <ul class="list-inside list-disc font-medium text-slate-800 dark:text-navy-100">
                            <li>PDF、DOCX、DOC、PPT、PPTX 最大 200M</li>
                            <li>TXT、MD 最大10M</li>
                            <li>其他 最大20M</li>
                        </ul>
                        <div class="mt-5 filepond fp-bordered">
                            <input type="file" class="knowledge-doc-upload"
                                   x-init="$el._x_filepond = FilePond.create($el)">
                            <input type="text" val="" class="knowledge-doc-upload-url" hidden>
                            <div class="mt-5 knowledge-doc-file-show"></div>
                        </div>
                    </div>
                </div>
                <div class="pointer-events-none absolute bottom-4 flex w-full justify-center">
                    <div class="pointer-events-auto mx-auto flex space-x-1 rounded-full border border-slate-150 bg-white px-4 py-0.5 shadow-lg dark:border-navy-700 dark:bg-navy-900">
                        <button @click="activeTab = 'tabQA'"
                                :class="activeTab === 'tabQA' && 'text-primary dark:text-accent'"
                                class="btn h-9 rounded-full py-0 px-4 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
                            <i class="fa fa-pencil"></i>
                        </button>
                        <button @click="activeTab = 'tabDoc'"
                                :class="activeTab === 'tabDoc' && 'text-primary dark:text-accent'"
                                class="btn h-9 rounded-full py-0 px-4 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
                            <i class="fa fa-folder"></i>
                        </button>
                        <button @click="activeTab = 'tabFile'"
                                :class="activeTab === 'tabFile' && 'text-primary dark:text-accent'"
                                class="btn h-9 rounded-full py-0 px-4 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
                            <i class="fa fa-check-circle"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <main x-data="{isShowChatInfo : $store.breakpoints.mdAndDown ,activeChat:{chatId:'chat-1',name:'ChatZQ',avatar_url:'https://hoppinzq.com/zui/static/picture/0.jpg'}}"
          x-effect="$store.breakpoints.mdAndDown === true && (isShowChatInfo = false)"
          class="main-content h-100vh chat-app mt-0 flex w-full flex-col" :class="isShowChatInfo && 'lg:mr-80'"
          @change-active-chat.window="activeChat=$event.detail">
        <div class="chat-header relative flex z-10 h-[61px] w-full shrink-0 items-center justify-between border-b border-slate-150 bg-white px-[calc(var(--margin-x)-.5rem)] shadow-sm transition-[padding,width] duration-[.25s] dark:border-navy-700 dark:bg-navy-800">
            <div class="flex items-center space-x-5">
                <div class="ml-1 h-7 w-7">
                    <button class="menu-toggle ml-0.5 flex h-7 w-7 flex-col justify-center space-y-1.5 text-primary outline-none focus:outline-none dark:text-accent-light/80"
                            :class="$store.global.isSidebarExpanded && 'active'"
                            @click="$store.global.isSidebarExpanded = !$store.global.isSidebarExpanded">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
                <div class="flex cursor-pointer items-center space-x-4 font-inter">
                    <div class="avatar">
                        <img class="rounded-full" src="https://hoppinzq.com/zui/static/picture/0.jpg"
                             :src="activeChat.avatar_url" alt="avatar">
                    </div>
                    <div>
                        <div x-data="usePopper({
                                                     offset: 12,
                                                     placement: 'bottom-end',
                                                     modifiers: [
                                                        {name: 'preventOverflow', options: {padding: 10}}
                                                     ]
                                                  })" class="flex" @mouseleave="isShowPopper = false"
                             @mouseenter="isShowPopper = true">
                            <p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                               x-text="activeChat.name"></p>
                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                <div class="popper-box">
                                    <div class="flex w-32 flex-col items-center rounded-md border border-slate-150 bg-white p-3 text-center dark:border-navy-600 dark:bg-navy-700">
                                        <div class="avatar h-16 w-16">
                                            <img class="rounded-full"
                                                 src="https://hoppinzq.com/api/static/image/zq_wx.jpg"
                                                 alt="avatar">
                                        </div>
                                        <p class="mt-2 font-medium tracking-wide text-slate-700 dark:text-navy-100">
                                            微信：
                                        </p>
                                        <a href="#"
                                           class="font-inter text-xs tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light">
                                            hoppinzqff19
                                        </a>
                                        <button
                                                @click="$clipboard({
                                                                    content:'hoppinzqff19',
                                                                    success:()=>$notification({text:'复制微信号到剪切板成功',variant:'success',position:'center-top'}),
                                                                    error:()=>$notification({text:'复制失败，请手动微信号',variant:'error',position:'center-top'})
                                                                  })"
                                                class="btn mt-4 h-6 rounded-full bg-primary px-4 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                            添加好友
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="mt-0.5 text-xs">基于<span class="font-semibold model-name">deepseek-r1</span>模型</p>
                    </div>
                </div>
            </div>
            <div class="-mr-1 flex items-center">
                <div x-data="{gptSettingModel:false}">
                    <button @click="gptSettingModel = true"
                            class="chatgpt-setting btn h-9 w-9 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:flex">
                        <svg xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5" fill="none"
                             viewbox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </button>
                    <template x-teleport="#x-teleport-target">
                        <div
                                class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                x-show="gptSettingModel"
                                role="dialog"
                                @keydown.window.escape="gptSettingModel = false"
                        >
                            <div
                                    class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                    @click="gptSettingModel = false"
                                    x-show="gptSettingModel"
                                    x-transition:enter="ease-out"
                                    x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100"
                                    x-transition:leave="ease-in"
                                    x-transition:leave-start="opacity-100"
                                    x-transition:leave-end="opacity-0"
                            ></div>
                            <div
                                    class="relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
                                    x-show="gptSettingModel"
                                    x-transition:enter="easy-out"
                                    x-transition:enter-start="opacity-0 scale-95"
                                    x-transition:enter-end="opacity-100 scale-100"
                                    x-transition:leave="easy-in"
                                    x-transition:leave-start="opacity-100 scale-100"
                                    x-transition:leave-end="opacity-0 scale-95"
                            >
                                <div
                                        class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5"
                                >
                                    <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                        GPT 设置
                                    </h3>
                                    <button
                                            @click="gptSettingModel = !gptSettingModel"
                                            class="btn btn-chatgpt-setting-close -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                                    >
                                        <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                class="h-4.5 w-4.5"
                                                fill="none"
                                                viewBox="0 0 24 24"
                                                stroke="currentColor"
                                                stroke-width="2"
                                        >
                                            <path
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    d="M6 18L18 6M6 6l12 12"
                                            ></path>
                                        </svg>
                                    </button>
                                </div>
                                <div class="px-4 py-4 sm:px-5">
                                    <div class="model-loader">
                                        <div class="flex items-center justify-center h-100">
                                            <div class="flex gap-2">
                                                <div class="spinner h-5 w-5 animate-spin rounded-full border-2 border-slate-150 border-r-slate-400 dark:border-navy-500 dark:border-r-navy-300"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <p>
                                        请输入购买的中转地址和apiKey。
                                        <a href="#"
                                           class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                                           style="cursor: help">
                                            不知道在哪买?
                                        </a>
                                    </p>
                                    <div class="mt-4 space-y-4">
                                        <label class="block">
                                            <span>代理、中转地址:</span>
                                        </label>
                                        <label class="relative flex">
                                            <input
                                                    class="chat-proxy-link form-input peer w-full rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                    placeholder=" 请输入代理或中转地址"
                                                    type="text"
                                            />
                                            <div class="pointer-events-none absolute right-0 flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
                                                <i class="chat-proxy-link-fa fa fa-spinner fa-spin"></i>
                                            </div>
                                        </label>
                                        <label class="block">
                                            <span>ApiKey（多个key需要用,隔开）:</span>
                                            <textarea
                                                    rows="2"
                                                    placeholder=" 输入sk-开头的ApiKey，多个key用,隔开。必须保证多个key来源于一个中转地址。"
                                                    class="chat-input-apikey form-textarea mt-1.5 w-full resize-none rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                            ></textarea>
                                        </label>
                                        <div>
                                            <p class="text-xs+ text-slate-400 dark:text-navy-300">
                                                当你输入了ApiKey和中转地址后，请先点击下面按钮测试是否可用，然后选择你的ApiKey可使用的大模型。
                                                如果openAI连接可用，只输入openAI的ApiKey即可。只有ApiKey是必填的。
                                            </p>
                                            <div class="flex items-center justify-between pt-4">
                                                <div class="flex items-center space-x-4">
                                                    <div class="h-12 w-12">
                                                        <img src="static/picture/chatGPT.png" alt="logo">
                                                    </div>
                                                    <p class="openai-link-state font-medium line-clamp-1"></p>
                                                </div>
                                                <button disabled
                                                        class="btn-apikey-test btn h-8 rounded-full border border-slate-200 px-3 text-xs+ font-medium text-primary hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-accent-light dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                                    <i class="btn-apikey-test-fa fa fa-spinner fa-spin"></i>
                                                    &nbsp;&nbsp;等待openai响应
                                                </button>
                                            </div>
                                        </div>
                                        <label class="block">
                                            <span>选择全局大模型 :</span>
                                            <select
                                                    class="form-model form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
                                            >
                                            </select>
                                        </label>
                                        <label class="inline-flex items-center space-x-2">
                                            <input
                                                    disabled
                                                    class="form-remember-url-and-apikey form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
                                                    type="checkbox"
                                            />
                                            <span>记住中转地址和apikey</span>
                                        </label>
                                        <div class="space-x-2 text-right">
                                            <button
                                                    @click="gptSettingModel = false"
                                                    class="btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
                                            >
                                                取消
                                            </button>
                                            <button
                                                    class="btn btn-save-gpt min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
                                            >
                                                保存
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <div x-data="{gptEditModel:false}">
                    <button @click="gptEditModel = true;$('.check-gpt-warning').hide();
                                    if(localStorage.getItem('zq:gpt:deepseek:check:check-gpt-warning')!='1'){localStorage.setItem('zq:gpt:deepseek:check:check-gpt-warning','1')}"
                            class="btn relative h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                        <i class="fa fa-bullhorn"></i>
                        <span class="absolute -top-px -right-px flex h-3 w-3 items-center justify-center check-gpt-warning">
                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-secondary opacity-80"></span>
                            <span class="inline-flex h-2 w-2 rounded-full bg-secondary"></span>
                        </span>
                    </button>
                    <template x-teleport="#x-teleport-target">
                        <div
                                class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                x-show="gptEditModel"
                                role="dialog"
                                @keydown.window.escape="gptEditModel = false"
                        >
                            <div
                                    class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                    @click="gptEditModel = false"
                                    x-show="gptEditModel"
                                    x-transition:enter="ease-out"
                                    x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100"
                                    x-transition:leave="ease-in"
                                    x-transition:leave-start="opacity-100"
                                    x-transition:leave-end="opacity-0"
                            ></div>
                            <div
                                    class="relative max-w-md rounded-lg bg-white pt-10 pb-4 text-center transition-all duration-300 dark:bg-navy-700"
                                    x-show="gptEditModel"
                                    x-transition:enter="easy-out"
                                    x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
                                    x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                                    x-transition:leave="easy-in"
                                    x-transition:leave-start="opacity-100 [transform:translate3d(0,0,0)]"
                                    x-transition:leave-end="opacity-0 [transform:translate3d(0,1rem,0)]"
                            >
                                <div class="avatar" style="width: 50%">
                                    <img src="static/image/deepseek.webp" alt="avatar"/>
                                </div>
                                <div class="mt-4 px-4 sm:px-12">
                                    <h3 class="text-lg text-slate-800 dark:text-navy-50">
                                        使用须知
                                    </h3>
                                    <p class="mt-1 text-slate-500 dark:text-navy-200">
                                        deepseek本身就有web和app版，而且免费，普通用户移至deepseek官网使用即可。
                                        这个只是调用api的一个demo，面向对象是程序员，可能过一会我就不维护了>_<
                                    </p>
                                </div>
                                <div class="my-4 mt-16 h-px bg-slate-200 dark:bg-navy-500"></div>
                                <div class="space-x-3">
                                    <button
                                            @click="gptEditModel = false"
                                            class="btn min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
                                    >
                                        我了解了
                                    </button>
                                    <a
                                            @click="gptEditModel = false"
                                            href="https://chat.deepseek.com/"
                                            target="_blank"
                                            class="btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
                                    >
                                        访问官网
                                    </a>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
                <button @click="$store.global.isDarkModeEnabled = !$store.global.isDarkModeEnabled"
                        class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:active:bg-navy-300/25">
                    <svg x-show="$store.global.isDarkModeEnabled"
                         x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
                         x-transition:enter-start="scale-75" x-transition:enter-end="scale-100 static"
                         class="h-6 w-6 text-amber-400" fill="currentColor" viewbox="0 0 24 24">
                        <path d="M11.75 3.412a.818.818 0 01-.07.917 6.332 6.332 0 00-1.4 3.971c0 3.564 2.98 6.494 6.706 6.494a6.86 6.86 0 002.856-.617.818.818 0 011.1 1.047C19.593 18.614 16.218 21 12.283 21 7.18 21 3 16.973 3 11.956c0-4.563 3.46-8.31 7.925-8.948a.818.818 0 01.826.404z"></path>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" x-show="!$store.global.isDarkModeEnabled"
                         x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
                         x-transition:enter-start="scale-75" x-transition:enter-end="scale-100 static"
                         class="h-6 w-6 text-amber-400" viewbox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
                              clip-rule="evenodd"></path>
                    </svg>
                </button>
                <div x-data="usePopper({placement:'bottom-end',offset:4})"
                     @click.outside="isShowPopper && (isShowPopper = false)" class="inline-flex">
                    <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
                            class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                        </svg>
                    </button>
                    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                        <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                            <ul>
                                <li>
                                    <a href="#"
                                       @click="isShowChatInfo = true,$('#tabKnowledge').click()"
                                       class="flex chat-knowledge-open h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                        <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i
                                                class="fa fa-folder"
                                                style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                        <span>知识库</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                       @click="$store.global.isRightSidebarExpanded = true"
                                       class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100" fill="none"
                                             viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                                  d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                                        </svg>
                                        <span>QA和文档</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div :class="$store.breakpoints.smAndUp && 'scrollbar-sm'"
             id="chat-window"
             class="chat-window grow overflow-y-auto px-[calc(var(--margin-x)-.5rem)] py-5 transition-all duration-[.25s]">
        </div>
        <div x-data="{fileExpanded:false,audioExpanded:false}" class="chat-footer relative flex h-32
                w-full shrink-0 items-center justify-between border-slate-150
                px-[calc(var(--margin-x)-.25rem)] transition-[padding,width] duration-[.25s]
                dark:border-navy-600 dark:bg-navy-800">
            <div x-collapse="" class="w-full absolute left-0 bottom-31 z-2" x-show="fileExpanded">
                <div class="card px-4 pb-4 sm:px-5" style="box-shadow: none;">
                    <div class="my-3 flex h-8 items-center justify-between">
                        <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            文件上传
                        </h2>
                        <button @click="fileExpanded = false"
                                class="close-file-expanded btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    <div>
                        <p>
                            图片识别和内容识别请使用GPT-4的大模型，Deepseek目前不支持图片内文字的识别。
                            有关文件内容识别的大模型选择，请参照
                            <a class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                               href="javascript:;">文档</a>
                        </p>
                        <div class="mt-5">
                            <div class="filepond fp-bordered">
                                <input type="file" class="chat-file-upload"
                                       x-init="$el._x_filepond = FilePond.create($el)">
                                <input type="text" val="" class="chat-file-upload-url" hidden>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div x-collapse="" class="w-full absolute left-0 bottom-31 z-2" x-show="audioExpanded">
                <div class="card px-4 pb-4 sm:px-5" style="box-shadow: none;">
                    <div class="my-3 flex h-8 items-center justify-between">
                        <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                            语音对讲
                        </h2>
                        <button @click="audioExpanded = !audioExpanded"
                                class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    <div>
                        <p>此功能需要https，因为只有在https下，js才被允许调用操作系统的接口打开麦克风。请在https下使用该功能，此外需要选择正确的大模型。</p>
                        <p>
                            语音及内容识别只支持GPT3.0和GPT4.0系列大模型或者百度语言识别，此处只是个demo。
                            有关语音内容识别的大模型选择，请参照
                            <a class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
                               href="javascript:;">文档</a>
                        </p>
                        <div class="mt-5">
                            <button
                                    onclick="funStart();" id="btnStart"
                                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                            >点我或长摁录制
                            </button>
                            <button
                                    onclick="funStop();" id="btnStop"
                                    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
                            >发送
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full rounded-lg border border-slate-300 transition-colors duration-200 focus-within:!border-primary hover:border-slate-400 dark:border-navy-450 dark:focus-within:!border-accent dark:hover:border-navy-400">
                <div class="flex justify-between"></div>
                <label>
                    <textarea rows="2" placeholder="输入对话内容"
                              class="form-input-message form-textarea w-full resize-none bg-transparent p-2 placeholder:text-slate-400/70"></textarea>
                </label>
                <div class="flex justify-between p-2">
                    <div class="flex items-end space-x-1">
                        <button @click="fileExpanded = !fileExpanded, audioExpanded=false"
                                class="btn -ml-1 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
                            </svg>
                        </button>
                        <button @click="fileExpanded = false, audioExpanded = !audioExpanded"
                                class="btn btn-audio -ml-1 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
                            </svg>
                        </button>
                        <div x-data="usePopper({
                                   offset: 12,
                                   placement: 'top',
                                   modifiers: [
                                      {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
                                      {name: 'preventOverflow', options: {padding: 10}}
                                   ]
                                })"
                             @click.outside="isShowPopper && (isShowPopper = false)"
                             class="flex"
                        >
                            <button x-ref="popperRef"
                                    @click="isShowPopper = !isShowPopper"
                                    class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                     stroke="currentColor" stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                </svg>
                            </button>
                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                <div class="popper-box max-w-xs">
                                    <div class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700">
                                        <div @click="isShowPopper = false"
                                             class="grid grid-cols-4 gap-1">
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                (๑•̀ㅂ•́)و✧
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                ヽ(✿ﾟ▽ﾟ)ノ
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                o(￣ヘ￣o＃)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                ㄟ( ▔, ▔ )ㄏ
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                凸(艹皿艹)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                (°ー°〃)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                (*￣rǒ￣)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                (￣_,￣ )
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                （＝。＝）
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                w(ﾟДﾟ)w
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                (ノへ￣、)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                ≡ω≡
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                (u‿ฺu✿ฺ)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                ♪(^∇^*)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                (#`O′)
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                ━┳━　━┳━
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                （′Д`）
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                ( =•ω•= )
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                ┭┮﹏┭┮
                                            </button>
                                            <button class="chat-emoji btn space-x-2 bg-slate-150 px-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                                Ψ(￣∀￣)Ψ
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-bottom: 1px">
                            <label class="ml-1 inline-flex items-center space-x-2">
                                <input value="knowledge"
                                       class="form-checkbox checked-knowledge is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
                                       type="checkbox"/>
                                <p>知识库</p>
                            </label>
                            <label class="ml-1 inline-flex items-center space-x-2">
                                <input value="network"
                                       class="form-checkbox is-outline h-5 w-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
                                       type="checkbox"/>
                                <p>联网</p>
                            </label>
                        </div>
                    </div>
                    <button @click="fileExpanded = false, audioExpanded = false" data-state="0"
                            class="btn btn-send-message space-x-2 bg-primary font-medium text-white hover:bg-primary-focus hover:shadow-lg hover:shadow-primary/50 focus:bg-primary-focus focus:shadow-lg focus:shadow-primary/50 active:bg-primary-focus/90">
                        <span>发送</span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewbox="0 0 24 24"
                             stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="m9.813 5.146 9.027 3.99c4.05 1.79 4.05 4.718 0 6.508l-9.027 3.99c-6.074 2.686-8.553.485-5.515-4.876l.917-1.613c.232-.41.232-1.09 0-1.5l-.917-1.623C1.26 4.66 3.749 2.46 9.813 5.146ZM6.094 12.389h7.341"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <template x-teleport="#x-teleport-target">
            <div x-data="{
            get showDrawer() {return $data.isShowChatInfo;},
            set showDrawer(val) {$data.isShowChatInfo = val;},
          }" x-show="showDrawer" @keydown.window.escape="showDrawer = false">
                <div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
                     @click="showDrawer = false" x-show="showDrawer && $store.breakpoints.mdAndDown"
                     x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100" x-transition:leave="ease-in"
                     x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
                <div class="fixed right-0 top-0 z-[101] h-full w-full sm:w-80">
                    <div class="flex h-full w-full flex-col border-l border-slate-150 bg-white transition-transform duration-200 dark:border-navy-600 dark:bg-navy-750"
                         x-show="showDrawer" x-transition:enter="ease-out transform-gpu"
                         x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
                         x-transition:leave="ease-in transform-gpu" x-transition:leave-start="translate-x-0"
                         x-transition:leave-end="translate-x-full">
                        <div class="flex h-[60px] items-center justify-between p-4">
                            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                对话文件
                            </h3>
                            <div class="-mr-1.5 flex space-x-1">
                                <button @click="$store.global.isRightSidebarExpanded = true"
                                        class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100" fill="none"
                                         viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                              d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                                    </svg>
                                </button>
                                <button @click="showDrawer=false"
                                        class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                         viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class="mt-5 flex flex-col items-center">
                            <h3 x-text="activeChat.name"
                                class="mt-2 text-lg font-medium text-slate-700 dark:text-navy-100">Hoppinzq</h3>
                            <p>这里保存了对话过程中上传&生成的文件</p>
                        </div>
                        <div x-data="{activeTab:'tabImages'}" class="tabs mt-6 flex flex-col">
                            <div class="is-scrollbar-hidden overflow-x-auto px-4">
                                <div class="tabs-list flex">
                                    <button @click="activeTab = 'tabImages'"
                                            :class="activeTab === 'tabImages' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                                            class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
                                        图片
                                    </button>
                                    <button @click="activeTab = 'tabFiles'"
                                            :class="activeTab === 'tabFiles' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                                            class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
                                        其他文件
                                    </button>
                                    <button @click="activeTab = 'tabKnowledge'"
                                            :class="activeTab === 'tabKnowledge' ? 'border-primary dark:border-accent text-primary dark:text-accent-light' : 'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
                                            id="tabKnowledge"
                                            class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
                                        知识库
                                    </button>
                                </div>
                            </div>
                            <div class="tab-content px-4 pt-4" style="max-height: calc(100vh - 200px);">
                                <div x-show="activeTab === 'tabImages'"
                                     x-transition:enter="transition-all duration-500 easy-in-out"
                                     x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                                     x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
                                    <div class="grid grid-cols-4 gap-2 chat-temp-image"></div>
                                </div>
                                <div x-show="activeTab === 'tabFiles'"
                                     x-transition:enter="transition-all duration-500 easy-in-out"
                                     x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                                     x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
                                    <div class="flex flex-col space-y-3.5 chat-temp-file"></div>
                                </div>
                                <div x-show="activeTab === 'tabKnowledge'" class="h-full"
                                     x-transition:enter="transition-all duration-500 easy-in-out"
                                     x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
                                     x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
                                    <div class="flex flex-col space-y-3.5 h-full chat-knowledge-file">
                                        <div class="flex h-full grow flex-col bg-white dark:bg-navy-750">
                                            <div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
                                                <div class="flex items-center">
                                                    <div class="avatar mr-3 hidden h-9 w-9 lg:flex">
                                                        <div class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5"
                                                                 viewBox="0 0 20 20" fill="currentColor">
                                                                <path d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9z"></path>
                                                                <path d="M3 8a2 2 0 012-2v10h8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z"></path>
                                                            </svg>
                                                        </div>
                                                    </div>
                                                    <p class="main-knowledge-name text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
                                                        知识库
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="flex h-[calc(100%-4.5rem)] grow flex-col">
                                                <div class="is-scrollbar-hidden grow overflow-y-auto">
                                                    <div class="mt-2 px-4">
                                                        <div x-data="{showModal:false}">
                                                            <button @click="showModal = true"
                                                                    class="btn btn-knowledge-attr-create w-full space-x-2 rounded-full border border-slate-200 py-2 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                     class="h-4.5 w-4.5"
                                                                     fill="none"
                                                                     viewbox="0 0 24 24" stroke="currentColor"
                                                                     stroke-width="1.5">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                          d="M12 4v16m8-8H4"></path>
                                                                </svg>
                                                                <span> 创建新标签 </span>
                                                            </button>
                                                            <template x-teleport="#x-teleport-target">
                                                                <div
                                                                        class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                                                                        x-show="showModal"
                                                                        role="dialog"
                                                                        @keydown.window.escape="showModal = false"
                                                                >
                                                                    <div
                                                                            class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                                                                            @click="showModal = false"
                                                                            x-show="showModal"
                                                                            x-transition:enter="ease-out"
                                                                            x-transition:enter-start="opacity-0"
                                                                            x-transition:enter-end="opacity-100"
                                                                            x-transition:leave="ease-in"
                                                                            x-transition:leave-start="opacity-100"
                                                                            x-transition:leave-end="opacity-0"></div>
                                                                    <div
                                                                            class="relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
                                                                            x-show="showModal"
                                                                            x-transition:enter="easy-out"
                                                                            x-transition:enter-start="opacity-0 scale-95"
                                                                            x-transition:enter-end="opacity-100 scale-100"
                                                                            x-transition:leave="easy-in"
                                                                            x-transition:leave-start="opacity-100 scale-100"
                                                                            x-transition:leave-end="opacity-0 scale-95">
                                                                        <div class="model-loader chat-qa-title-loader">
                                                                            <div class="flex items-center justify-center h-100">
                                                                                <div class="flex gap-2">
                                                                                    <div class="spinner h-5 w-5 animate-spin rounded-full border-2 border-slate-150 border-r-slate-400 dark:border-navy-500 dark:border-r-navy-300"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                                                                            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                                                                创建标签
                                                                            </h3>
                                                                            <button
                                                                                    @click="showModal = !showModal"
                                                                                    class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                                                                            >
                                                                                <svg
                                                                                        xmlns="http://www.w3.org/2000/svg"
                                                                                        class="h-4.5 w-4.5"
                                                                                        fill="none"
                                                                                        viewBox="0 0 24 24"
                                                                                        stroke="currentColor"
                                                                                        stroke-width="2"
                                                                                >
                                                                                    <path
                                                                                            stroke-linecap="round"
                                                                                            stroke-linejoin="round"
                                                                                            d="M6 18L18 6M6 6l12 12"
                                                                                    ></path>
                                                                                </svg>
                                                                            </button>
                                                                        </div>
                                                                        <div class="px-4 py-4 sm:px-5">
                                                                            <p>
                                                                                演示期间，不允许修改和删除已有标签，新增时请谨慎操作。
                                                                            </p>
                                                                            <div class="mt-4 space-y-4">
                                                                                <label class="block">
                                                                        <span>属性key:<span
                                                                                class="text-error"> *</span></span>
                                                                                    <input id="form-attr-key"
                                                                                           class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                                                           placeholder="属性key"
                                                                                           type="text"/>
                                                                                </label>
                                                                                <label class="block">
                                                                        <span>属性名:<span
                                                                                class="text-error"> *</span></span>
                                                                                    <input id="form-attr-name"
                                                                                           class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                                                                           placeholder="属性名"
                                                                                           type="text"/>
                                                                                </label>
                                                                                <label class="block">
                                                                                    <span>新增标签（可多个也可为空）:</span>
                                                                                    <select
                                                                                            class="mt-1.5 w-full form-attr-label"
                                                                                            multiple
                                                                                            placeholder="新增标签"
                                                                                            autocomplete="off">
                                                                                    </select>
                                                                                </label>
                                                                                <div class="space-x-2 text-right">
                                                                                    <button
                                                                                            @click="showModal = false"
                                                                                            class="btn btn-attr-modal-cancel min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                                                                        取消
                                                                                    </button>
                                                                                    <button
                                                                                            class="btn btn-attr-modal-add min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                                                                        新增
                                                                                    </button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </template>
                                                        </div>
                                                    </div>
                                                    <div x-data="{expanded:true}">
                                                        <div class="mt-4 flex items-center justify-between px-4">
                                                            <span class="text-xs font-medium uppercase"> 标签 </span>
                                                            <div class="-mr-1.5 flex">
                                                                <button class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                         class="h-3.5 w-3.5" fill="none"
                                                                         viewbox="0 0 24 24" stroke="currentColor"
                                                                         stroke-width="2">
                                                                        <path stroke-linecap="round"
                                                                              stroke-linejoin="round"
                                                                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                                                                    </svg>
                                                                </button>
                                                                <button @click="expanded =! expanded"
                                                                        class="btn h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                                                    <svg xmlns="http://www.w3.org/2000/svg"
                                                                         class="h-3.5 w-3.5"
                                                                         :class="expanded && 'rotate-180'" fill="none"
                                                                         viewbox="0 0 24 24"
                                                                         stroke="currentColor" stroke-width="2">
                                                                        <path stroke-linecap="round"
                                                                              stroke-linejoin="round" stroke-width="2"
                                                                              d="M19 9l-7 7-7-7"></path>
                                                                    </svg>
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div x-show="expanded" x-collapse="">
                                                            <ul class="knowledge-attr-label mt-1 space-y-1 px-2 font-inter text-xs+ font-medium scrollbar-sm"
                                                                style="max-height: 275px;overflow-y: scroll;"></ul>
                                                        </div>
                                                    </div>
                                                    <div class="my-3 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
                                                    <ul class="space-y-1.5 px-2 font-inter text-xs+ font-medium">
                                                        <li>
                                                            <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
                                                               href="#">
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                     class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
                                                                     fill="none" viewbox="0 0 24 24"
                                                                     stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                          stroke-width="1.5"
                                                                          d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
                                                                </svg>
                                                                <span class="text-slate-800 dark:text-navy-100">分享知识库</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
                                                               href="#">
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                     class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
                                                                     fill="none" viewbox="0 0 24 24"
                                                                     stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                          stroke-width="1.5"
                                                                          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                                </svg>
                                                                <span class="text-slate-800 dark:text-navy-100">最近QA</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
                                                               href="#">
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                     class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
                                                                     fill="none" viewbox="0 0 24 24"
                                                                     stroke="currentColor">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                          stroke-width="1.5"
                                                                          d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
                                                                </svg>
                                                                <span class="text-slate-800 dark:text-navy-100">标签</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
                                                               href="#">
                                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                                     class="h-4.5 w-4.5" fill="none"
                                                                     viewbox="0 0 24 24" stroke="currentColor"
                                                                     stroke-width="1.5">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                                                </svg>
                                                                <span>删除</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flex flex-col p-4">
                                                    <div class="flex items-center justify-between">
                                                        <p>
                                                            <span class="font-medium text-slate-600 dark:text-navy-100">141.54MB</span>
                                                            / 240MB
                                                        </p>
                                                        <a href="#"
                                                           class="text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">刷新</a>
                                                    </div>
                                                    <div class="progress mt-2 h-2 bg-slate-150 dark:bg-navy-500">
                                                        <div class="w-7/12 rounded-full bg-info"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </main>
</div>
<div x-data="{baseModal:false}">
    <button @click="baseModal = true"
            class="btn btn-base-modal bg-slate-150 hidden font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
        设置
    </button>
    <template x-teleport="#x-teleport-target">
        <div
                class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                x-show="baseModal"
                role="dialog"
                @keydown.window.escape="baseModal = false"
        >
            <div
                    class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                    @click="baseModal = false"
                    x-show="baseModal"
                    x-transition:enter="ease-out"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
            ></div>
            <div
                    class="base-modal-content relative max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
                    x-show="baseModal"
                    x-transition:enter="ease-out"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
            >
            </div>
        </div>
    </template>
</div>
<div x-data="{editChatModal:false}">
    <button
            @click="editChatModal = true"
            class="btn btn-chat-edit-modal bg-slate-150 hidden font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    >
        编辑对话
    </button>
    <template x-teleport="#x-teleport-target">
        <div
                class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                x-show="editChatModal"
                role="dialog"
                @keydown.window.escape="editChatModal = false"
        >
            <div
                    class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                    @click="editChatModal = false"
                    x-show="editChatModal"
                    x-transition:enter="ease-out"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
            ></div>
            <div
                    class="relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
                    x-show="editChatModal"
                    x-transition:enter="easy-out"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="easy-in"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
            >
                <div
                        class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5"
                >
                    <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                        编辑对话
                    </h3>
                    <button
                            @click="editChatModal = !editChatModal"
                            class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                    >
                        <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="h-4.5 w-4.5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                        >
                            <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M6 18L18 6M6 6l12 12"
                            ></path>
                        </svg>
                    </button>
                </div>
                <div class="px-4 py-4 sm:px-5">
                    <div class="space-y-4">
                        <div class="flex flex-col">
                            <span class="text-base font-medium text-slate-600 dark:text-navy-100">聊天头像</span>
                            <input type="text" class="form-chat-edit-avatar-temp" hidden>
                            <label class="avatar mt-1.5 h-20 w-20">
                                <img class="mask is-squircle form-chat-edit-avatar-img" src="static/picture/200x200.png"
                                     alt="avatar">
                                <input
                                        tabindex="-1"
                                        x-init="$el._x_filepond = FilePond.create($el)"
                                        data-limit="1048576"
                                        data-type="png,jpg,jpeg"
                                        type="file"
                                        class="form-chat-edit-avatar pointer-events-none absolute inset-0 h-full w-full opacity-0"
                                />
                                <div class="absolute bottom-0 right-0 flex items-center justify-center rounded-full bg-white dark:bg-navy-700">
                                    <a class="btn h-6 w-6 rounded-full border border-slate-200 p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:border-navy-500 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20"
                                             fill="currentColor">
                                            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                                        </svg>
                                    </a>
                                </div>
                            </label>
                        </div>
                        <label class="block">
                            <span>对话标题</span>
                            <input
                                    class="form-chat-edit-title form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="对话标题"
                                    type="text"
                            />
                        </label>
                        <label class="block">
                            <span>对话描述</span>
                            <input
                                    class="form-chat-edit-description form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="对话描述"
                                    type="text"
                            />
                        </label>
                        <label class="block">
                            <span x-tooltip="'每次对话都以该设定为前提，以system的role'">系统设定</span>
                            <textarea
                                    rows="2"
                                    placeholder="每次对话都以该设定为前提，而且不是所有大模型都支持system角色。此外我们强烈建议将system prompt以提问的方式"
                                    class="form-chat-edit-system form-textarea mt-1.5 w-full resize-none rounded-lg border border-slate-300 bg-transparent p-2.5 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                            ></textarea>
                        </label>
                        <label class="block">
                            <span>聊天大模型</span>
                            <select
                                    class="form-chat-edit-modal form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
                            >
                                <option value="deepseek-r1">deepseek-r1</option>
                                <option value="deepseek-v3">deepseek-v3</option>
                            </select>
                        </label>
                        <label class="inline-flex items-center space-x-2">
                            <input
                                    class="form-chat-edit-state form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
                                    type="checkbox"
                            />
                            <span>是否公开</span>
                        </label>
                        <div class="space-x-2 text-right">
                            <button
                                    @click="editChatModal = false"
                                    class="btn form-chat-edit-cancel min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
                            >
                                取消
                            </button>
                            <button
                                    class="btn form-chat-edit-btn min-w-[7rem] rounded-full bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
                            >
                                修改
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
<div x-data="{deleteChatModal:false}">
    <button @click="deleteChatModal = true"
            class="btn btn-chat-delete-modal hidden bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
        删除对话
    </button>
    <template x-teleport="#x-teleport-target">
        <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
             x-show="deleteChatModal"
             role="dialog"
             @keydown.window.escape="deleteChatModal = false">
            <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                 @click="deleteChatModal = false"
                 x-show="deleteChatModal"
                 x-transition:enter="ease-out"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"></div>
            <div class="relative w-full max-w-lg origin-top rounded-lg bg-white transition-all duration-300 dark:bg-navy-700"
                 x-show="deleteChatModal"
                 x-transition:enter="easy-out"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="easy-in"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95">
                <div class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                    <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                        删除确认
                    </h3>
                    <button @click="deleteChatModal = !deleteChatModal"
                            class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             class="h-4.5 w-4.5"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke="currentColor"
                             stroke-width="2">
                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="px-4 py-4 sm:px-5">
                    <div class="alert flex space-x-2 rounded-lg border border-error px-4 py-4 text-error">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             class="h-5 w-5"
                             viewBox="0 0 20 20"
                             fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
                                  clip-rule="evenodd"/>
                        </svg>
                        <p>确定要删除该对话吗？</p>
                    </div>
                    <div class="mt-4 space-y-4">
                        <div class="space-x-2 text-right">
                            <button @click="deleteChatModal = false"
                                    class="btn btn-delete-close-chat min-w-[7rem] rounded-full border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
                                取消
                            </button>
                            <button class="btn btn-delete-chat min-w-[7rem] rounded-full bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
<div x-data="{sliderCaptchaModal:false}">
    <button
            @click="sliderCaptchaModal = true"
            class="btn btn-base-modal bg-slate-150 hidden font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    >
        验证码
    </button>
    <template x-teleport="#x-teleport-target">
        <div
                class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
                x-show="sliderCaptchaModal"
                role="dialog"
                @keydown.window.escape="sliderCaptchaModal = false"
        >
            <div
                    class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                    @click="sliderCaptchaModal = false"
                    x-show="sliderCaptchaModal"
                    x-transition:enter="ease-out"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
            ></div>
            <div
                    class="base-modal-content relative max-w-lg rounded-lg bg-white px-4 py-1 pb-6 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
                    x-show="sliderCaptchaModal"
                    x-transition:enter="ease-out"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
            >
                <div class="my-1 flex h-8 items-center justify-between">
                    <h2
                            class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
                    >
                        你是人类吗？
                    </h2>

                    <button
                            @click="sliderCaptchaModal = !sliderCaptchaModal"
                            class="btn btn-slider-captcha-modal-close -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
                    >
                        <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="h-4.5 w-4.5"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor"
                                stroke-width="2"
                        >
                            <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    d="M6 18L18 6M6 6l12 12"
                            />
                        </svg>
                    </button>
                </div>
                <div id="captcha"></div>
            </div>
        </div>
    </template>
</div>
<div id="x-teleport-target"></div>
<script>window.addEventListener("DOMContentLoaded", () => Alpine.start());</script>
<script src="static/js/config.js"></script>
<script src="https://hoppinzq.com/static/js/vendor/jquery-3.5.1.min.js"></script>
<script src="https://hoppinzq.com/chat/static/js/editormd.js"></script>
<script src="https://hoppinzq.com/chat/static/js/marked.min.js"></script>
<script src="https://hoppinzq.com/chat/static/js/prettify.min.js"></script>
<!--<script src="https://hoppinzq.com/chat/static/js/raphael.min.js"></script>-->
<!--<script src="https://hoppinzq.com/chat/static/js/underscore.min.js"></script>-->
<!--<script src="https://hoppinzq.com/chat/static/js/sequence-diagram.min.js"></script>-->
<!--<script src="https://hoppinzq.com/chat/static/js/flowchart.min.js"></script>-->
<!--<script src="https://hoppinzq.com/chat/static/js/jquery.flowchart.min.js"></script>-->
<!--<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>-->
<!--<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>-->
<!--<script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>-->
<script src="static/js/zq.js"></script>
<script src="static/js/crypto-js.min.js"></script>
<script src="static/js/tom-select.complete.min.js"></script>
<script src="static/js/jquery.cookie.js"></script>
<script src="static/js/toastify.js"></script>
<script src="static/js/zjax.js"></script>
<script src="static/js/auth.js"></script>
<script>
    var chat_proxy_link_valid_state = false;
    var openai_link_valid_state = false;
    var chat_proxy_apikey_valid_state = false;
    var chatWindow = document.getElementById(`chat-window`);
    var webMetaData = {
        zq: __zqApi,//zq元数据，提供公用方法和浏览器环境信息（如：是否移动端，是否在联网环境等）
        sse: null,//sse对象，仅在使用时连接，error事件和complete事件都放在error中处理了，请知悉
        chatState: 0,//0表示关闭，即没有在聊天，处于空闲状态。1表示等待中，这时候后台已经接收到请求，但还没有返回数据。2表示正在聊天中，后台通过sse实时返回聊天对话。
        index: 1,//当前聊天索引
        userId: null,
        settingId: null,
        userno: null,//不同于userId，userno为websocket标志的当前浏览器的标识，每次重启都会改变
        isContent: true,//是否携带上下文
        cache: {},//缓存
        chat: [],//聊天内容
        chatCurrentId: null,//当前聊天id
        openaiLink: "https://api.openai.com/",
        model: "deepseek-r1",
        knowledge: null,
        isKnowledge: false,
        tomSelect: {},
        gridTable: {},
    }

    class StreamFetcher {
        constructor(url, options = {}) {
            this.url = url;
            this.options = options;
            this.controller = new AbortController();
            this.isCancelled = false;
        }

        async start(onData, onError, onComplete) {
            try {
                const response = await fetch(this.url, {
                    ...this.options,
                    signal: this.controller.signal,
                    headers: {
                        'Content-Type': 'application/json',
                        ...this.options.headers
                    }
                });
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                let buffer = '';
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                while (true) {
                    if (this.isCancelled) {
                        reader.cancel();
                        break;
                    }
                    const {done, value} = await reader.read();
                    if (done) break;
                    buffer += decoder.decode(value, {stream: true});
                    // 检查是否包含完整的事件（SSE 以 \n\n 分隔）
                    const events = buffer.split('\n\n');
                    buffer = events.pop();
                    for (const event of events) {
                        if (event.startsWith('data:')) {
                            const data = JSON.parse(event.slice(5).trim());
                            onData(data);
                        }
                    }
                }

                onComplete();
            } catch (error) {
                if (!this.isCancelled) {
                    console.error(error);
                    onError(error);
                }
            }
        }

        cancel() {
            this.isCancelled = true;
            this.controller.abort();
        }
    }

    function setUserId(userId) {
        if (userId == "") {
            userId = "274795671465279488";
        }
        webMetaData.userId = userId;
    }

    $(function () {
        setUserId(user_id);
        initOpenAiLink();
        initSetting();
        initEvent();
        initChat();
        initOther();
        initFile();
        initKnowledge();
    })

    /**
     * 初始化文件组件
     */
    function initFile() {
        // 绑定文件添加事件，上传文件
        $zq('.chat-file-upload').on('FilePond:addfile', function (event) {
            let form = new FormData();
            let fileName = event.detail.file.filename;
            let fileSize = event.detail.file.fileSize;
            let fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
            form.append("file", event.detail.file.file);
            // 上传文件到服务器，获取oss文件访问地址
            $zq.zAFjax({
                url: `${gptip}/openai/uploadFile`,
                method: "POST",
                processData: false,
                contentType: false,
                data: form,
                success: function (_res) {
                    if (_res.code == 200) {
                        $(".chat-file-upload-url").val(_res.data);
                        if (fileType == "jpg" || fileType == "png" || fileType == "jpeg" || fileType == "gif" || fileType == "bmp" || fileType == "webp") {
                            addImageFile(_res.data);
                        } else {
                            addTempFile(fileName, fileSize, _res.data)
                        }
                    } else {
                        alertError(_res.msg);
                    }
                }
            });
        });
        $('.chat-file-upload').on('FilePond:removefile', function (event) {
            $(".chat-file-upload-url").val("");
        });
        // 聊天头像上传
        $zq(".form-chat-edit-avatar").on('FilePond:addfile', function (event) {
            let fileName = event.detail.file.filename;
            let fileSize = event.detail.file.fileSize;
            let fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
            // 可以从form-chat-edit-avatar的data中取这两个限制，我直接写死了，
            if (fileType != "png" && fileType != "jpg") {
                alertError("只允许上传png，jpg格式文件，若要更多支持请联系微信：zhangqiff19");
                return;
            }
            if (fileSize >= 1024 * 1024) {
                alertError("只允许上传不超过1MB的图片");
                return;
            }
            let form = new FormData();
            form.append("file", event.detail.file.file);
            $.zAFjax({
                url: `${gptip}/openai/uploadFile`,
                method: "POST",
                processData: false,
                contentType: false,
                data: form,
                success: function (_res) {
                    if (_res.code == 200) {
                        $(".form-chat-edit-avatar-img").attr("src", _res.data);
                        $(".form-chat-edit-avatar-temp").val(_res.data)
                    } else {
                        alertError("文件上传失败，请检查文件服务器是否正常");
                    }
                }
            });
        });
    }

    function addImageFile(src) {
        $(".chat-temp-image").append(`<img class="aspect-square rounded-lg object-cover object-center"
                                             src="${src}" alt="image">`)
    }

    function addTempFile(name, size, url) {
        $(".chat-temp-file").append(`<div class="flex items-center space-x-3">
                                            <div class="h-6 w-6 mask is-squircle flex h-11 w-11 items-center justify-center bg-success text-white">
                                                <i class="fa fa-file"></i>
                                            </div>
                                            <div>
                                                <p class="font-medium text-slate-700 dark:text-navy-100">
                                                    ${name}
                                                </p>
                                                <div class="flex text-xs text-slate-400 dark:text-navy-300">
                                                    <span>${__zqApi.fileSizeFormat(size)}</span>
                                                </div>
                                            </div>
                                        </div>`);
    }

    function initSetting() {
        $zq.zAjax({
            type: "post",
            url: `${gptproxy}`,
            zqMethod: "queryCurrentUserGptSetting",
            success: function (response) {
                let res = $zq.parseJSON(response);
                if (res.data != null) {
                    webMetaData.settingId = res.data.id;
                    setModelName(res.data.model);
                }
            }
        })
    }

    function initOther() {
        if (localStorage.getItem('zq:gpt:deepseek:check:check-gpt-warning') == "1") {
            $(".check-gpt-warning").hide();
        }
        setModelName();
    }

    function setModelName(modelName = webMetaData.model) {
        $(".model-name").text(modelName);
        webMetaData.model = modelName;
    }

    function initOpenAiLink() {
        $(".btn-apikey-test").html("测试apikey是否可用").prop('disabled', false);
        if (openai_link_valid_state) {
            $(".openai-link-state").addClass("text-success").text("openAI链接可用");
        } else {
            $(".openai-link-state").addClass("text-error").text("openAI链接不可用");
        }
    }

    function initEvent() {
        // window 窗口关闭的时候，关闭sse
        window.onbeforeunload = function () {
            if (webMetaData.sse != null) {
                webMetaData.sse.close();
            }
        }
        if (window.localStorage.getItem("__zq_proxy_url")) {
            chat_proxy_link_valid_state = true;
            $(".chat-proxy-link").val(window.localStorage.getItem("__zq_proxy_url"));
            $(".form-remember-url-and-apikey").prop("checked", true);
        }
        if (window.localStorage.getItem("__zq_apikey")) {
            chat_proxy_apikey_valid_state = true;
            $(".chat-input-apikey").val(window.localStorage.getItem("__zq_apikey"))
        }
        //测试apikey是否可用
        $(".btn-apikey-test").off("click").on("click", function () {
            $(".chat-proxy-link").blur();
            if (!chat_proxy_link_valid_state) {
                openBaseModel("error", "错误！", "代理或中转地址不可用，请确认链接是否填写正确，然后重试！");
                chat_proxy_apikey_valid_state = false;
            } else {
                let url = $(".chat-proxy-link").val();
                let apikey = $(".chat-input-apikey").val();
                $zq.zAjax({
                    type: "post",
                    url: `${gptproxy}`,
                    zqMethod: "getModel",
                    zqParams: JSON.stringify({
                        "modelQueryDTO": {
                            "proxyUrl": url,
                            "apikey": apikey
                        }
                    }),
                    beforeSend: function () {
                        $(".model-loader").css("display", "block");
                    },
                    complete: function () {
                        setTimeout(function () {
                            $(".model-loader").css("display", "none");
                        }, 1000)
                    },
                    success: function (response) {
                        let res = $zq.parseJSON(response);
                        if (res.code != 200) {
                            alertError(res.msg);
                            $(".form-remember-url-and-apikey").prop('disabled', true);
                        } else {
                            alertSuccess("成功，请在下面选择一个大模型！");
                            $(".form-model").html("");
                            $.each(res.data, function (index, model) {
                                $(".form-model").append(`<option data-id="${model.id}">${model.id}</option>`)
                            })
                            $(".form-remember-url-and-apikey").prop('disabled', false);
                            chat_proxy_apikey_valid_state = true;
                        }
                    }
                })
            }
        })

        //为代理、中转链接绑定url是否可用事件
        $(".chat-proxy-link").blur(function () {
            let url = $(this).val();
            if (!url.length) {
                if (openai_link_valid_state) {
                    chat_proxy_link_valid_state = true;
                    $(".chat-proxy-link").removeClass("border-error").addClass("border-success");
                    $(".chat-proxy-link-fa").removeClass("fa-spinner fa-spin fa-close text-error").addClass("fa-check text-success");
                } else {
                    chat_proxy_link_valid_state = false;
                    $(".chat-proxy-link").removeClass("border-success").addClass("border-error");
                    $(".chat-proxy-link-fa").removeClass("fa-spinner fa-spin fa-check text-success").addClass("fa-close text-error");
                }
                $(this).val(webMetaData.openaiLink);
                return;
            }
            isLinkValid(url);
        })

        //是否记住url和apikey
        $(".form-remember-url-and-apikey").click(function () {
            let url = $(".chat-proxy-link").val();
            let apikey = $(".chat-input-apikey").val();
            if ($(".form-remember-url-and-apikey").prop("checked")) {
                window.localStorage.setItem("__zq_proxy_url", url);
                window.localStorage.setItem("__zq_apikey", apikey);
            } else {
                window.localStorage.removeItem("__zq_proxy_url");
                window.localStorage.removeItem("__zq_apikey");
            }
        })

        $(".chat-emoji").click(function () {
            $(".form-input-message").text($(".form-input-message").text() + $(this).text());
        })

        //保存大模型配置
        $(".btn-save-gpt").click(function () {
            if (!chat_proxy_link_valid_state) {
                alertError("代理地址不可用！");
                return;
            }
            if (!chat_proxy_apikey_valid_state) {
                alertError("apikey不可用！");
                return;
            }
            let url = $(".chat-proxy-link").val();
            let apikey = $(".chat-input-apikey").val();
            let model = $(".form-model").val();
            $zq.zAjax({
                type: "post",
                url: `${gptproxy}`,
                zqMethod: "insertGptModel",
                zqParams: JSON.stringify({
                    "gptSettingInsertDTO": {
                        "proxyUrl": url,
                        "apikey": apikey,
                        "model": model
                    }
                }),
                beforeSend: function () {
                    $(".btn-save-gpt").prop('disabled', true);
                    $(".model-loader").css("display", "block");
                },
                complete: function () {
                    $(".btn-save-gpt").prop('disabled', false);
                    $(".model-loader").css("display", "none");
                },
                success: function (response) {
                    let res = response;
                    if (__zqApi.elementType(response) == "string") {
                        res = $zq.parseJSON(response);
                    }
                    if (res.code != 200) {
                        alertError("保存失败！" + res.msg);
                    } else {
                        alertSuccess("保存成功！");
                        webMetaData.model = model;
                        setModelName(model);
                        if ($(".form-remember-url-and-apikey").prop("checked")) {
                            window.localStorage.setItem("__zq_proxy_url", url);
                            window.localStorage.setItem("__zq_apikey", apikey);
                        }
                        setTimeout(function () {
                            $(".btn-chatgpt-setting-close").click();
                        }, 1000)
                    }
                }
            })
        })

        //绑定回车
        $(".form-input-message").keydown(function (e) {
            if (e.keyCode == 13) {
                userSendMessage();
                e.preventDefault();
            }
        })
    }

    function userSendMessage(message = "") {
        if (webMetaData.chatState != 0) {
            alertError("正在聊天中，请稍等提问！")
            return;
        }
        if (message == "") {
            message = $(".form-input-message").val();
        }
        let img = $(".chat-file-upload-url").val();
        if (!message) {
            alertError("请输入内容")
            $(".form-input-message").focus();
            return;
        }
        if ($(".default-chat").length) {
            $(".default-chat").remove();
        }
        if (img != "") {
            message = `<img class="mb-1 rounded-lg object-cover object-center" src="${img}">${message}`;
        }
        $(".form-input-message").val("");
        showChatMessage(message);
        if (webMetaData.isKnowledge) {
            answerKnowledge(message);
        } else {
            answerFetch(message);
        }
    }

    function answerKnowledge(message) {
        $.zjax({
            type: "post",
            url: `${gptproxy}`,
            zqMethod: "qa",
            zqParams: JSON.stringify({
                "qaRequestDTO": {
                    "question": message,
                    "type": "ALL",
                    "method": "HYBRID"
                }
            }),
            beforeSend: function () {
                webMetaData.chatState = 1;
                waitChat(webMetaData.index);
            },
            success: function (response) {
                let res = $zq.parseJSON(response);
                let index = webMetaData.index;
                $("#message-user-chat-answer-" + index).find(".wave").remove();
                if (res.code != 200) {
                    setErrorChat(res.msg);
                } else {
                    let answer = res.data;
                    if (answer.length) {
                        $("#message-user-chat-answer-content-" + index).append2(`<div class="card col-span-12 pb-4 sm:col-span-6">
                <div class="my-3 flex items-center justify-between px-4 sm:px-5">
                    <h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
                        知识库给出的答案（对话不会保存）
                    </h2>
                    <div x-data="usePopper({placement:'bottom-end',offset:4})" @click.outside="isShowPopper &amp;&amp; (isShowPopper = false)" class="inline-flex">
                        <button x-ref="popperRef" @click="isShowPopper = !isShowPopper" class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
                            </svg>
                        </button>
                        <div x-ref="popperRoot" class="popper-root" :class="isShowPopper &amp;&amp; 'show'" style="position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-77.6px, 183.2px, 0px);" data-popper-placement="bottom-end">
                            <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                                <ul>
                                    <li>
                                        <a href="#" class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">赞这个</a>
                                    </li>
                                </ul>
                                <div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
                                <ul>
                                    <li>
                                        <a href="#" class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                        再来</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <ol class="timeline line-space px-4 [--size:1.5rem] sm:px-5 message-user-qa-answer-content-${index}"></ol>
            </div>`, function () {
                            let ragPrompt = "你是一个有用的助手，你要回答用户的问题。我会提供一些内容供你参考，内容来源于知识库，可能是文档，也可能是QA问答对。此外，为了保护用户隐私，不要让用户知道你是从知识库获取的内容：";
                            $.each(answer, function (i, item) {
                                ragPrompt += `\n${item.type == "DOC" ? `来源于文档： ${item.title} 的内容 ：${item.content}` : `##  来源于QA问答对的内容 ： ${item.title} ：${item.content}`}`;
                                $(`.message-user-qa-answer-content-${index}`).append2(`<li class="timeline-item">
                        <div class="timeline-item-point rounded-full border border-current bg-white text-error dark:bg-navy-700">
                            <i class="fa fa-folder text-tiny"></i>
                        </div>
                        <div class="timeline-item-content flex-1 pl-4 sm:pl-8">
                            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
                                <p class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0">
                                    ${item.type == "DOC" ? item.title : "Q ：" + item.title}
                                </p>
                                <span class="text-xs text-slate-400 dark:text-navy-300">${item.type}</span>
                            </div>
                            <p class="py-1" id="message-user-qa-answer-content-${index}-${i}">
                                ${item.type == "DOC" ? `${item.content.substring(item.content.indexOf(":") + 1, item.content.length)}` : "A ：" + item.content}

                            </p>
                            <div class="mt-4">
                                <span class="font-medium text-slate-600 dark:text-navy-100">
                                来源:
                                </span>
                                <a @click="$store.global.isRightSidebarExpanded = true" class="cursor-pointer text-xs text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">
                                    ${item.type == "DOC" ? "文档：" + item.title : item.type}
                                </a>
                            </div>
                            <div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
                        </div>
                    </li>`, function () {
                                    if (item.type == "DOC") {
                                        markdownToHtml(`message-user-qa-answer-content-${index}-${i}`);
                                    }
                                })
                                if (i == answer.length - 1) {
                                    answerFetch(message, ragPrompt);
                                }
                            });
                        })
                    } else {
                        setErrorChat("暂无答案");
                    }
                }
            }, complete: function () {
                webMetaData.index++;
                webMetaData.chatState = 0;
            }
        })
    }

    function answerFetch(message, prompt = null) {
        let stream = new StreamFetcher(`${gptip}/openai/streamChat`, {
            method: 'POST',
            headers: generateHeaders(),
            body: JSON.stringify({
                "message": message,
                "systemPrompt": prompt
            })
        });
        webMetaData.chatState = 1;
        waitChat(webMetaData.index);
        let isReasoningContent = false;
        stream.start(
            chunk => {
                $("#message-user-chat-answer-" + webMetaData.index).find(".wave").remove();
                $(".chat-file-upload-url").val("");
                $(".close-file-expanded").click();
                if (chunk.content.indexOf("sse_error_zq") != -1) {
                    setErrorChat(chunk);
                    stream.cancel();
                } else if (chunk.content.indexOf("200:sse_success_zq") != -1) {
                    endChat();
                } else {
                    let chat = chunk;
                    webMetaData.chatState = 2;
                    if (chat.reasoning_content != null) {
                        if (!isReasoningContent) {
                            isReasoningContent = true;
                            $("#message-user-chat-answer-reason-content-" + webMetaData.index).css("color", "#2eaf29")
                                .after(`<div class="my-4 flex items-center space-x-3 text-slate-400"><div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div><p id="message-user-chat-answer-reason-content-divider-${webMetaData.index}">AI推理ing</p><div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div></div>`);
                        }
                        $("#message-user-chat-answer-reason-content-" + webMetaData.index)
                            .text($("#message-user-chat-answer-reason-content-" + webMetaData.index).text() + chat.reasoning_content);
                    } else if (chat.content != null) {
                        if (isReasoningContent) {
                            isReasoningContent = false;
                            $("#message-user-chat-answer-content-" + webMetaData.index).css("color", "#000");
                            $("#message-user-chat-answer-reason-content-divider-" + webMetaData.index).text("推理完毕")
                        }
                        if (chat.role == "assistant" && chat.functionCall) {
                            $("#message-user-chat-answer-" + webMetaData.index).prepend(
                                `<ol class="timeline line-space [--size:1.5rem]">
                    <li class="timeline-item">
                        <div class="timeline-item-point rounded-full border border-current bg-white text-warning dark:bg-navy-700">
                            <i class="fa fa-project-diagram text-tiny"></i>
                        </div>
                        <div class="timeline-item-content flex-1 pl-1 sm:pl-2 mt-1">
                            <div class="flex flex-col justify-between pb-2 sm:flex-row sm:pb-0">
                                <p class="pb-2 font-medium leading-none text-slate-600 dark:text-navy-100 sm:pb-0">
                                    函数：${chat.functionCall.name} 调用中
                                </p>
                            </div>
                            <p class="py-2" id="message-user-chat-function-${webMetaData.index}"></p>
                        </div>
                    </li>
                </ol>`
                            )
                        } else if (chat.role == "function") {
                            $("#message-user-chat-function-" + webMetaData.index)
                                .append(`<button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.interactive.content="'#chat-function-${webMetaData.index}'">点我查看调用结果</button>
  <template id="chat-function-${webMetaData.index}">
    <div class="flex space-x-3 rounded-lg bg-slate-150 p-3 dark:bg-navy-500">
      <div>
        <p class="text-xs text-slate-500 dark:text-navy-200">${chat.content}</p>
      </div>
    </div>
  </template>`)
                        } else {
                            $("#message-user-chat-answer-content-" + webMetaData.index)
                                .data("question", message)
                                .text($("#message-user-chat-answer-content-" + webMetaData.index).text() + chat.content);
                        }
                    }
                    if (chat.finishReason != undefined && chat.finishReason == "length") {
                        alert("token超出限制");
                    }
                    chatWindow.scrollTop = chatWindow.scrollHeight;
                }
            },
            error => {
                if (webMetaData.chatState == 0) {
                    $("#message-user-chat-answer-" + webMetaData.index).find(".wave").remove();
                    setErrorChat("连接错误");
                }
                stream.cancel();
            }, () => {
                webMetaData.chatState = 0;
                webMetaData.index++;
                endChat();
            }
        );

        function generateHeaders() {
            return {
                'chatId': webMetaData.chatCurrentId,
                'settingId': webMetaData.settingId,
                'userId': webMetaData.userId
            };
        }
    }

    function answerSSE(message) {
        let questionEncode = encodeURI(message);
        let eventSource = new EventSource(`${gptip}/openai/chatDeepSeek?message=${questionEncode}&chatId=${webMetaData.chatCurrentId}&userId=${webMetaData.userId}&settingId=${webMetaData.settingId}`);
        webMetaData.chatState = 1;
        waitChat(webMetaData.index);
        webMetaData.sse = eventSource;
        let isReasoningContent = false;
        eventSource.onopen = function (event) {
        };
        eventSource.onmessage = function () {
            $("#message-user-chat-answer-" + webMetaData.index).find(".wave").remove();
            $(".chat-file-upload-url").val("");
            $(".close-file-expanded").click();
            let msg = event.data;
            if (msg.indexOf("500:sse_error_zq") != -1) {
                webMetaData.chatState = 0;
                setErrorChat(msg);
                eventSource.close();
            } else if (msg.indexOf("200:sse_success_zq") != -1) {
                endChat();
            } else {
                let chat = $zq.parseJSON(msg);
                webMetaData.chatState = 2;
                if (chat.choices[0].message.reasoning_content != null) {
                    if (!isReasoningContent) {
                        isReasoningContent = true;
                        $("#message-user-chat-answer-reason-content-" + webMetaData.index).css("color", "#2eaf29")
                            .after(`<div class="my-4 flex items-center space-x-3 text-slate-400"><div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div><p id="message-user-chat-answer-reason-content-divider-${webMetaData.index}">AI推理ing</p><div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div></div>`);
                    }
                    $("#message-user-chat-answer-reason-content-" + webMetaData.index)
                        .text($("#message-user-chat-answer-reason-content-" + webMetaData.index).text() + chat.choices[0].message.reasoning_content);
                } else if (chat.choices[0].message.content != null) {
                    if (isReasoningContent) {
                        isReasoningContent = false;
                        $("#message-user-chat-answer-content-" + webMetaData.index).css("color", "#000");
                        $("#message-user-chat-answer-reason-content-divider-" + webMetaData.index).text("推理完毕")
                    }
                    $("#message-user-chat-answer-content-" + webMetaData.index)
                        .data("question", message)
                        .text($("#message-user-chat-answer-content-" + webMetaData.index).text() + chat.choices[0].message.content);
                }
                if (chat.choices[0].finishReason != undefined && chat.choices[0].finishReason == "length") {
                    alert("token超出限制");
                }
                chatWindow.scrollTop = chatWindow.scrollHeight;
            }
        }
        eventSource.onerror = function (event) {
            if (event.type == "error" && webMetaData.chatState == 0) {
                $("#message-user-chat-answer-" + webMetaData.index).find(".wave").remove();
                setErrorChat("连接错误");
                eventSource.close();
            }
            webMetaData.index++;
            webMetaData.chatState = 0;
            eventSource.close();
        }
    }

    function checkChatState() {
        setInterval(function () {
            let $btn = $(".btn-send-message");
            let state = webMetaData.chatState;
            if (state == 0) {
                if ($btn.data("state") != "0") {
                    $(".btn-send-message").off("click").on("click", function () {
                        userSendMessage();
                    }).html(`<span>发送</span><svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewbox="0 0 24 24"
                         stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="m9.813 5.146 9.027 3.99c4.05 1.79 4.05 4.718 0 6.508l-9.027 3.99c-6.074 2.686-8.553.485-5.515-4.876l.917-1.613c.232-.41.232-1.09 0-1.5l-.917-1.623C1.26 4.66 3.749 2.46 9.813 5.146ZM6.094 12.389h7.341"></path>
                    </svg>`).data("state", "0");
                }
            } else {
                if ($btn.data("state") == "0") {
                    $(".btn-send-message").off("click").on("click", function () {
                        stopChat();
                    }).html("<span>停止</span><i class='fa fa-pause'></i>").data("state", state);
                }
            }
            webMetaData.isKnowledge = $(".checked-knowledge").prop("checked");
        }, 50);
    }

    function endChat() {
        webMetaData.chatState = 0;
        markdownToHtml("message-user-chat-answer-content-" + webMetaData.index);
        // 新增
        if (webMetaData.index == 1) {
            insertChatFirst();
        } else {
            insertChatMessage("insertChatMessage");
        }
    }

    function insertChatMessage(method, chat = findChatByChatId(), index = webMetaData.index) {
        let lastChatUserDom = $("#message-user-chat-question-" + index);
        let tempChatMessage = [];
        chat.chatMessageList.push({
            "chat_id": webMetaData.chatCurrentId,
            "message_role": "user",
            "message": lastChatUserDom.html(),
            "message_index": index
        });
        tempChatMessage.push({
            "chat_id": webMetaData.chatCurrentId,
            "message_role": "user",
            "message": lastChatUserDom.html(),
            "message_index": index
        })
        let lastChatAssistantDom = $("#message-user-chat-answer-content-" + index);
        let lastChatReasonAssistantDom = $("#message-user-chat-answer-reason-content-" + index);
        chat.chatMessageList.push({
            "chat_id": webMetaData.chatCurrentId,
            "message_role": "assistant",
            "reason_message": lastChatReasonAssistantDom.text(),
            "message": lastChatAssistantDom.data("predate") == undefined ? lastChatAssistantDom.text() : lastChatAssistantDom.data("predate"),
            "message_index": index
        });
        tempChatMessage.push({
            "chat_id": webMetaData.chatCurrentId,
            "message_role": "assistant",
            "reason_message": lastChatReasonAssistantDom.text(),
            "message": lastChatAssistantDom.data("predate") == undefined ? lastChatAssistantDom.text() : lastChatAssistantDom.data("predate"),
            "message_index": index
        });
        $zq.zAjax({
            type: "post",
            url: `${gptproxy}`,
            zqMethod: method,
            zqParams: JSON.stringify({
                "chat": $.extend(chat, {
                    "chatMessageList": tempChatMessage
                })
            }),
            success: function (data) {

            }
        })
    }

    function insertChatFirst() {
        let chatId = webMetaData.chatCurrentId;
        let index = webMetaData.index;
        let chat_title = $("#message-user-chat-question-" + index).text().trim().substr(0, 10);
        let chat_answer = $("#message-user-chat-answer-content-" + index).text().trim().substr(0, 20);
        $(`#chat-box-area-${chatId}`).find("p").each(function (index, element) {
            if (index == 0) {
                $(element).text(chat_title);
            } else if (index == 1) {
                $(element).text(chat_answer);
            }
        })
        let chat = findChatByChatId();
        chat.chat_title = chat_title;
        chat.chat_answer = chat_answer;
        insertChatMessage("insertChatFirst", chat);
    }

    /**
     * 根据chatID查找chat
     * */
    function findChatByChatId(chatId = webMetaData.chatCurrentId) {
        let temp = null;
        $.each(webMetaData.chat, function (i, chat) {
            if (chat.chat_id == chatId) {
                temp = chat;
                return;
            }
        })
        return temp;
    }

    /**
     * 错误的聊天
     * */
    function setErrorChat(error) {
        let errorMsg = "";
        if (!error.length) {
            errorMsg = "似乎出现了某些问题,但我不能提供具体的原因和细节,你可以微信zhangqiff19<br>另外，该对话不会被保存！";
        } else {
            let errors = error.split(",");
            errorMsg = `发生了一些错误，请微信:${errors[1]}<button
                    @click="$clipboard({
                            content:'${errors[1]}',
                            success:()=>$notification({text:'复制成功',variant:'success',position:'center-top'}),
                            error:()=>$notification({text:'复制失败，请手动复制',variant:'error',position:'center-top'})
                          })"
                class="btn h-5 w-5 shrink-0 rounded-full p-0 ">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"></path>
                                        <path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"></path>
                                    </svg>
                                </button>询问细节或者询问如何正确使用，日志ID：${errors[2]}<button
                       @click="$clipboard({
                            content:'${errors[2]}',
                            success:()=>$notification({text:'复制成功',variant:'success',position:'center-top'}),
                            error:()=>$notification({text:'复制失败，请手动复制',variant:'error',position:'center-top'})
                          })"
                       class="btn h-5 w-5 shrink-0 rounded-full p-0 ">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"></path>
                                        <path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"></path>
                                    </svg>
                                </button>`
        }

        $("#message-user-chat-answer-" + webMetaData.index)
            .addClass("rounded-lg bg-gradient-to-r from-amber-400 to-orange-600 p-2")
            .html(`<div class="rounded-lg bg-slate-50 px-4 py-4 dark:bg-navy-900 sm:px-5">
                       ${errorMsg}
                   </div>`);
    }

    function waitChat(index) {
        $("#chat-message-" + webMetaData.chatCurrentId).append2(`<div id="user-chat-answer-${index}" class="message-content flex items-start space-x-2.5 sm:space-x-5">
                    <div class="avatar">
                        <img class="rounded-full" src="static/image/deepseek-3.png"
                             :src="activeChat.avatar_url" alt="avatar">
                    </div>
                    <div class="flex flex-col items-start space-y-3.5">
                        <div class="flex mr-4 max-w-lg sm:mr-10">
                            <div id="message-user-chat-answer-${index}" class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
                                <div class="wave">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </div>
                                <p id="message-user-chat-answer-reason-content-${index}" class="dark:bg-navy-700 dark:text-navy-100 text-word-break-all"></p>
                                <p id="message-user-chat-answer-content-${index}" class="dark:bg-navy-700 dark:text-navy-100 text-word-break-all"></p>
                            </div>
                            <div x-data="usePopper({placement:'bottom-start',offset:4})"
                                 @click.outside="isShowPopper && (isShowPopper = false)" class="inline-flex flex-col justify-center">
                                <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
                                        class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                                    </svg>
                                </button>
                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                    <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                                        <ul>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-zan-${index}"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i class="fa fa-thumbs-o-up" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                    <span>赞这个</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-translate-${index}" data-type="markdown"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100">
                                                        <i class="fa fa-file-text-o" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i>
                                                    </span>
                                                    <span>内容格式化转换</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-copy-${index}"
                                                @click="$clipboard({
                                                    content:document.querySelector('#message-user-chat-answer-content-${index}').innerText,
                                                    success:()=>$notification({text:'复制成功',variant:'success',position:'center-top'}),
                                                    error:()=>$notification({text:'复制失败，请手动复制',variant:'error',position:'center-top'})
                                                  })"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i class="fa fa-copy" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                    <span>复制</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-token-${index}"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100">
                                                        <i class="fa fa-file-text-o" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i>
                                                    </span>
                                                    <span>Token计算</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-reply-${index}"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i class="fa fa-reply text-error" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                    <span x-tooltip="'以温度为1'">重新回答</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`, function () {
            // 点赞
            $(`#message-user-chat-answer-content-zan-${index}`).on("click", function () {
                if (index == webMetaData.index && webMetaData.chatState != 0) {
                    alertError("等待聊天结束后再点赞");
                } else {
                    alertError("点赞成功");
                }
            })

            // md转text
            $(`#message-user-chat-answer-content-translate-${index}`).on("click", function () {
                if (index == webMetaData.index && webMetaData.chatState != 0) {
                    alertError("等待聊天结束后再转文本");
                } else {
                    if ($(this).data("type") == "markdown") {
                        $(this).data("type", "html");
                        $(`#message-user-chat-answer-content-${index}`).removeClass("markdown-body")
                            .removeClass("editormd-html-preview").html("")
                            .text($(`#message-user-chat-answer-content-${index}`).data("predate"));
                    } else {
                        $(this).data("type", "markdown");
                        markdownToHtml(`message-user-chat-answer-content-${index}`);
                    }
                }
            })

            // 重试
            $(`#message-user-chat-answer-content-reply-${index}`).on("click", function () {
                if (index == webMetaData.index && webMetaData.chatState != 0) {
                    alertError("等待聊天结束后再重试");
                } else if (index < webMetaData.index - 1) {
                    alertError("仅能回答最近一条对话");
                } else {
                    let message = $(`#message-user-chat-answer-content-${index}`).data("question");
                    $.zjax({
                        url: `${gptproxy}`,
                        zqMethod: "deleteChatMessageBatchRecent",
                        zqParams: JSON.stringify({
                            chatId: webMetaData.chatCurrentId
                        }),
                        success: function (res) {
                            let _res = $zq.parseJSON(res);
                            if (_res.code == 200) {
                                webMetaData.index--;
                                $(`#user-chat-answer-${webMetaData.index}`).remove();
                                answerFetch(message);
                            } else {
                                alertError("重新回答出错了")
                            }
                        }
                    })
                }
            })

            // token计算
            $(`#message-user-chat-answer-content-token-${index}`).on("click", function () {
                if (webMetaData.chatState != 0) {
                    alertError("等待聊天结束后再计算token");
                } else {
                    let chat = findChatByChatId();
                    let chatMessages = chat.chatMessageList;
                    let lastUser, lastAssistant, lastAssistantReasoning;
                    let lastIndex = webMetaData.index - 1;
                    $.each(chatMessages, function (index, chatMessage) {
                        if (chatMessage.message_index == lastIndex) {
                            if (chatMessage.message_role == "user") {
                                lastUser = chatMessage.message;
                            }
                            if (chatMessage.message_role == "assistant") {
                                lastAssistant = chatMessage.message;
                                lastAssistantReasoning = chatMessage.reason_message;
                            }
                        }
                    })
                    $.zjax({
                        type: "post",
                        url: `${gptproxy}`,
                        zqMethod: "calculateToken",
                        zqParams: JSON.stringify({
                            "tokenRequestDTO": {
                                "messages": [
                                    {
                                        "role": "system",
                                        "content": `${chat.chat_system}`
                                    },
                                    {
                                        "role": "user",
                                        "content": `${lastUser}`
                                    }
                                ],
                                "message": `${lastAssistant}`,
                                "reason_message": `${lastAssistantReasoning}`,
                                "model": `${webMetaData.model}`
                            }
                        }),
                        storageCache: true,
                        success: function (response) {
                            let data = $zq.parseJSON(response);
                            if (data.code == 200) {
                                alertSuccess(data.data);
                            } else {
                                alertError(data.msg);
                            }
                        }
                    })
                }
            });
        })
    }

    function addExtraMessage(chatId = "chat-message-" + webMetaData.chatCurrentId,) {
        $("#" + chatId).append2(`<div class="mx-4 flex items-center space-x-3 justify-center"><div class="card p-4 sm:col-span-2 sm:p-5">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-4 sm:gap-5 lg:gap-6">
                    <div class="flex items-center space-x-4 rounded-2xl border border-slate-150 p-4 dark:border-navy-600">
                        <div class="mask is-star-2 flex h-12 w-12 items-center justify-center bg-warning/10 dark:bg-warning">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-warning dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                            </svg>
                        </div>
                        <div class="font-inter">
                            <p class="text-base font-semibold text-slate-700 dark:text-navy-100">
                                203
                            </p>
                            <p>All Posts</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4 rounded-2xl border border-slate-150 p-4 dark:border-navy-600">
                        <div class="mask is-star-2 flex h-12 w-12 items-center justify-center bg-primary/10 dark:bg-accent">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                        </div>
                        <div class="font-inter">
                            <p class="text-base font-semibold text-slate-700 dark:text-navy-100">
                                16
                            </p>
                            <p>Post Writers</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4 rounded-2xl border border-slate-150 p-4 dark:border-navy-600">
                        <div class="mask is-star-2 flex h-12 w-12 items-center justify-center bg-secondary/10 dark:bg-secondary">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                            </svg>
                        </div>
                        <div class="font-inter">
                            <p class="text-base font-semibold text-slate-700 dark:text-navy-100">
                                12.3k
                            </p>
                            <p>Likes</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4 rounded-2xl border border-slate-150 p-4 dark:border-navy-600">
                        <div class="mask is-star-2 flex h-12 w-12 items-center justify-center bg-success/10 dark:bg-success">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                            </svg>
                        </div>
                        <div class="font-inter">
                            <p class="text-base font-semibold text-slate-700 dark:text-navy-100">
                                3k
                            </p>
                            <p>Comments</p>
                        </div>
                    </div>
                </div>
            </div></div>`, function () {

        })
    }

    function showChatMessage(message, chatId = "chat-message-" + webMetaData.chatCurrentId, messageId = webMetaData.index, date, isUser = true, isNow = true, reason_message = '', fn = () => {
    }) {
        if (isUser) {
            $("#" + chatId).append2(`
            <div class="message-content flex items-start justify-end space-x-2.5 sm:space-x-5">
                <div class="flex flex-col items-end space-y-3.5">
                    <div class="ml-4 max-w-lg sm:ml-10">
                        <div id="message-user-chat-question-${messageId}" data-role="user" data-id="${messageId}" class=" rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">${message}</div>
                    </div>
                </div>
                <div class="avatar">
                    <img class="rounded-full" src="https://hoppinzq.com/zui/static/picture/0.jpg" alt="avatar">
                </div>
            </div>
        `, function () {
                if (__zqApi.elementType(fn) == "function")
                    fn();
            })
        } else {
            $("#" + chatId).append2(`<div class="message-content flex items-start space-x-2.5 sm:space-x-5">
                    <div class="avatar">
                        <img class="rounded-full" src="static/image/deepseek-3.png"
                             :src="activeChat.avatar_url" alt="avatar">
                    </div>
                    <div class="flex flex-col items-start space-y-3.5">
                        <div class="flex mr-4 max-w-lg sm:mr-10">
                            <div class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
                                <p style="color:#2eaf29" id="message-user-chat-answer-reason-content-${messageId}" class="dark:bg-navy-700 dark:text-navy-100 text-word-break-all">${reason_message}</p>
                                <div class="my-4 flex items-center space-x-3 text-slate-400"><div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div><p id="message-user-chat-answer-reason-content-divider-${messageId}">AI推理完毕</p><div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div></div>
                                <p id="message-user-chat-answer-content-${messageId}" data-role="assistant" data-id="${messageId}" class="dark:bg-navy-700 dark:text-navy-100 text-word-break-all">${message}</p>
                            </div>
                            <div x-data="usePopper({placement:'bottom-start',offset:4})"
                                 @click.outside="isShowPopper && (isShowPopper = false)" class="inline-flex flex-col justify-center">
                                <button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
                                        class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" viewbox="0 0 24 24"
                                         stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
                                    </svg>
                                </button>
                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                    <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                                        <ul>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-zan-${messageId}"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i class="fa fa-thumbs-o-up" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                    <span>赞这个</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-translate-${messageId}" data-type="markdown"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i class="fa fa-file-text-o" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                    <span>内容格式化转换</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-copy-${messageId}"
                                                @click="$clipboard({
                                                    content:document.querySelector('#message-user-chat-answer-content-${messageId}').innerText,
                                                    success:()=>$notification({text:'复制成功',variant:'success',position:'center-top'}),
                                                    error:()=>$notification({text:'复制失败，请手动复制',variant:'error',position:'center-top'})
                                                  })"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i class="fa fa-copy" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                    <span>复制</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-token-${messageId}"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100">
                                                        <i class="fa fa-file-text-o" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i>
                                                    </span>
                                                    <span>Token计算</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" id="message-user-chat-answer-content-reply-${messageId}"
                                                   class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20">
                                                    <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i class="fa fa-reply text-error" style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                    <span x-tooltip="'以温度为1'">重新回答</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`, function () {
                // 点赞
                $(`#message-user-chat-answer-content-zan-${messageId}`).on("click", function () {
                    if (webMetaData.chatState != 0) {
                        alertError("等待聊天结束后再点赞");
                    } else {
                        alertError("点赞成功");
                    }
                })

                // md转text
                $(`#message-user-chat-answer-content-translate-${messageId}`).on("click", function () {
                    if (webMetaData.chatState != 0) {
                        alertError("等待聊天结束后再转文本");
                    } else {
                        if ($(this).data("type") == "markdown") {
                            $(this).data("type", "html");
                            $(`#message-user-chat-answer-content-${messageId}`).removeClass("markdown-body")
                                .removeClass("editormd-html-preview").html("")
                                .text($(`#message-user-chat-answer-content-${messageId}`).data("predate"));
                        } else {
                            $(this).data("type", "markdown");
                            markdownToHtml(`message-user-chat-answer-content-${messageId}`);
                        }
                    }
                })

                // 重试
                $(`#message-user-chat-answer-content-reply-${messageId}`).on("click", function () {
                    alertError("不支持重新回答历史对话，您可以重新提问");
                })

                // token计算
                $(`#message-user-chat-answer-content-token-${messageId}`).on("click", function () {
                    if (webMetaData.chatState != 0) {
                        alertError("等待聊天结束后再计算token");
                    } else {
                        let chat = findChatByChatId();
                        let chatMessages = chat.chatMessageList;
                        let lastUser, lastAssistant, lastAssistantReasoning;
                        let lastIndex = webMetaData.index - 1;
                        $.each(chatMessages, function (index, chatMessage) {
                            if (chatMessage.message_index == lastIndex) {
                                if (chatMessage.message_role == "user") {
                                    lastUser = chatMessage.message;
                                }
                                if (chatMessage.message_role == "assistant") {
                                    lastAssistant = chatMessage.message;
                                    lastAssistantReasoning = chatMessage.reason_message;
                                }
                            }
                        })
                        $.zjax({
                            type: "post",
                            url: `${gptproxy}`,
                            zqMethod: "calculateToken",
                            zqParams: JSON.stringify({
                                "tokenRequestDTO": {
                                    "messages": [
                                        {
                                            "role": "system",
                                            "content": `${chat.chat_system}`
                                        },
                                        {
                                            "role": "user",
                                            "content": `${lastUser}`
                                        }
                                    ],
                                    "message": `${lastAssistant}`,
                                    "reason_message": `${lastAssistantReasoning}`,
                                    "model": `${webMetaData.model}`
                                }
                            }),
                            storageCache: true,
                            success: function (response) {
                                let data = $zq.parseJSON(response);
                                if (data.code == 200) {
                                    alertSuccess(data.data);
                                } else {
                                    alertError(data.msg);
                                }
                            }
                        })
                    }
                });
            })
        }
        chatWindow.scrollTop = chatWindow.scrollHeight;
    }

    /**
     * 打开基础模态框
     * @param color
     * @param title
     * @param description
     */
    function openBaseModel(color = "success", title, description) {
        $(".base-modal-content").html("").append(`
                <i class="inline h-28 w-28 text-${color} text-7xl fa ${color == "success" ? "fa-check" : "fa-close"}"></i>
                <div class="mt-4">
                    <h2 class="text-2xl text-slate-700 dark:text-navy-100">
                        ${title}
                    </h2>
                    <p class="mt-2">
                        ${description}
                    </p>
                    <button
                        @click="baseModal = false"
                        class="btn mt-6 bg-${color} font-medium text-white hover:bg-${color}-focus focus:bg-${color}-focus active:bg-${color}-focus/90"
                    >
                        关闭
                    </button>
                </div>`)
        $(".btn-base-modal").click();
    }

    /**
     * 连接是否有效
     */
    function isLinkValid(url) {
        $.zjax({
            type: "post",
            url: `${gptproxy}`,
            zqMethod: "isUrlAvailable",
            zqParams: JSON.stringify({
                "proxyUrl": url
            }),
            success: function (response) {
                let res = $zq.parseJSON(response);
                chat_proxy_link_valid_state = res.data;
                if (chat_proxy_link_valid_state) {
                    chat_proxy_link_valid_state = true;
                    $(".chat-proxy-link").removeClass("border-error").addClass("border-success");
                    $(".chat-proxy-link-fa").removeClass("fa-spinner fa-spin fa-close text-error").addClass("fa-check text-success");
                } else {
                    chat_proxy_link_valid_state = false;
                    $(".chat-proxy-link").removeClass("border-success").addClass("border-error");
                    $(".chat-proxy-link-fa").removeClass("fa-spinner fa-spin fa-check text-success").addClass("fa-close text-error");
                }
            }
        })
    }

    function initChat() {
        $(".btn-send-message").on("click", function () {
            userSendMessage();
        });
        initFirstChat();
        checkChatState();
        $zq.zAjax({
            type: "get",
            url: `${gptproxy}`,
            zqMethod: "getChatAndMessageByUserId",
            zqParams: JSON.stringify({"userId": webMetaData.userId}),
            beforeSend: function () {
                $(".chat-left-title-loader").css("display", "block");
            },
            complete: function () {
                $(".chat-left-title-loader").css("display", "none");
            },
            success: function (data) {
                let res = $zq.parseJSON(data);
                if (res.data.length) {
                    $.each(res.data, function (index, chat) {
                        webMetaData.chat.push(chat);
                        let chatId = chat.chat_id;
                        let chatImg = chat.chat_image;
                        if (chatImg == undefined) {
                            if (chat.chat_modal.indexOf("deepseek") != -1) {
                                chatImg = "https://hoppinzq.com/api/static/image/deepseek-3.png";
                            }
                        }
                        $(".chat-left-title").append2(`
                        <div data-id="${chatId}" @click="webMetaData.chatCurrentId='${chatId}',chatWindow.scrollTop=0,webMetaData.index = ${(chat.chatMessageList.length / 2) + 1},${__zqApi.isMobile ? `$store.global.isSidebarExpanded = false,` : ``}$dispatch('change-active-chat',{chatId:'${chatId}',avatar_url:'${chatImg}',name:'DeepSeekZQ'})"
                             id="chat-box-area-${chatId}"
                             class="chat-box-area flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
                            <div class="avatar h-10 w-10">
                                <img class="rounded-full chat-box-area-avatar-${chatId}"  src="${chatImg}" alt="avatar">
                            </div>
                            <div class="flex flex-1 flex-col">
                                <div class="flex items-baseline justify-between space-x-1.5">
                                    <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
                                        ${chat.chat_title}
                                    </p>
                                    <div x-data="usePopper({placement:'bottom-start',offset:4})"
                                             @click.outside="isShowPopper && (isShowPopper = false)" class="inline-flex">
                                            <button x-ref="popperRef" @click="isShowPopper = !isShowPopper,event.stopPropagation();" data-id="${chatId}"
                                                    class="text-tiny+ text-slate-400 dark:text-navy-300 btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                                <div class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
                                                    <ul>
                                                        <li>
                                                            <a href="#"
                                                               @click="openChatEdit('${chatId}')"
                                                               class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                                <span class="h-5.5 w-5.5 text-slate-500 dark:text-navy-100"><i
                                                                        class="fa fa-edit"
                                                                        style="font-size: 17px;margin-left: 2px;margin-top: 2px;"></i></span>
                                                                <span>对话编辑</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="#"
                                                                @click="chatDeleteCheck('${chatId}')"
                                                               class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                                                     viewbox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                          d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                                                </svg>
                                                                <span>删除对话</span></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                <div class="mt-1 flex items-center justify-between space-x-1">
                                    <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
                                        ${chat.chat_answer}
                                    </p>
                                </div>
                            </div>
                        </div>
`, function () {
                            $(`#chat-box-area-${chatId}`).click(function () {
                                $(this).addClass("active").siblings().removeClass("active");
                            })
                        });
                        $(".chat-left-sm-title").append2(`
                            <div @click="webMetaData.chatCurrentId='${chatId}',chatWindow.scrollTop=0,webMetaData.index = ${chat.chatMessageList.length / 2},$dispatch('change-active-chat',{chatId:'${chatId}',avatar_url:'https://hoppinzq.com/api/static/image/deepseek-3.png',name:'DeepSeekZQ'})"
                                 id="chat-box-area-sm-${chatId}"
                                 class="chat-box-area flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
                                <div class="avatar h-10 w-10">
                                    <img class="rounded-full chat-box-area-avatar-${chatId}" src="${chatImg}" alt="avatar">
                                    <div class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700"></div>
                                </div>
                            </div>
`, function () {
                            $(`#chat-box-area-sm-${chatId}`).click(function () {
                                $(this).addClass("active").siblings().removeClass("active");
                            })
                        });
                        if (chat.chatMessageList.length) {
                            $(".chat-window").append(`<div id="chat-message-${chatId}"
                     x-show="activeChat.chatId === '${chatId}'"
                     x-transition:enter="transition-all duration-500 easy-in-out"
                     x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
                     x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]"
                     class="space-y-5">
                    <div class="mx-4 flex items-center space-x-3">
                        <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
                        <p>${chat.chat_createDate}</p>
                        <div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
                    </div>
                </div>`);
                            $.each(chat.chatMessageList, function (index, chatMessage) {
                                let messageId = chatMessage.message_id;
                                if (chatMessage.message_role == "user") {
                                    showChatMessage(chatMessage.message, `chat-message-${chatId}`, messageId, chatMessage.message_createDate, true, false)
                                }
                                if (chatMessage.message_role == "assistant") {
                                    showChatMessage(chatMessage.message, `chat-message-${chatId}`, messageId, chatMessage.message_createDate, false, false, chatMessage.reason_message)
                                }
                                markdownToHtml(`message-user-chat-answer-content-${messageId}`);
                            })
                        }
                    })
                }
            }
        })
    }

    /**
     * md转html
     * */
    function markdownToHtml(id) {
        let markdown = $("#" + id).text();
        $("#" + id).text("").data("predate", markdown);
        let testEditormdView = editormd.markdownToHTML(id, {
            markdown: markdown,
            htmlDecode: true,
            emoji: true
        });
        $(".message-content pre").each(function (index_code, element_code) {
            let $element_code = $(element_code);
            $(element_code).find(".code_change").remove();
            $(element_code).find(".copy-code-btn").remove();
            let code = $element_code.text();
            $element_code.addClass("pre_" + index_code);
            let $code = $element_code.on({
                mouseover: function (e1) {
                    e1.stopPropagation();
                },
                mouseout: function (e2) {
                    e2.stopPropagation();
                }
            });
            $element_code.prepend($(`<button class="code_change cursor-pointer" data-html2canvas-ignore>切换主题</button>`).off("click").on("click", function () {
                $code.toggleClass("hljs");
            })).prepend(
                // todo
                $(`<button
                      class="copy-code-btn"
                      data-html2canvas-ignore
                      @click="$clipboard({
                        content:document.querySelector('.editormd-html-preview > pre > ol').innerText,
                        success:()=>$notification({text:'复制成功',variant:'success',position:'center-top'}),
                        error:()=>$notification({text:'复制失败，请手动复制',variant:'error',position:'center-top'})
                      })"
                    >复制</button>`)
            )
        })
    }

    function alertError(msg = "系统错误") {
        Toastify({
            text: msg,
            duration: 3000,
            close: false,
            style: {
                "color": "#ffffff"
            },
            gravity: "top",
            className: "toastify-center bg-error",
        }).showToast();
    }

    function alertSuccess(msg = "成功") {
        Toastify({
            text: msg,
            duration: 3000,
            close: false,
            style: {
                "color": "#ffffff"
            },
            gravity: "top",
            className: "toastify-center bg-success",
        }).showToast();
    }

    function stopChat() {
        if (webMetaData.sse != null) {
            webMetaData.sse.close();
        }
        if (webMetaData.chatState == 1) {
            $("#user-chat-answer-" + webMetaData.index).remove();
        } else if (webMetaData.chatState == 2) {
            markdownToHtml("message-user-chat-answer-content-" + webMetaData.index);
            insertChatMessage("insertChatMessage");
            webMetaData.index++;
        }
    }


    /**
     * 编辑对话
     */
    function chatEdit(chatId) {
        let chat = {chat_id: chatId};
        chat.chat_createDate = __zqApi.getRealDate(new Date());
        if ($(".form-chat-edit-title").val().trim().length == 0) {
            alertError("标题必填");
            $(".form-chat-edit-title").focus();
            return;
        }
        if ($(".form-chat-edit-description").val().trim().length == 0) {
            alertError("内容必填");
            $(".form-chat-edit-description").focus();
            return;
        }
        chat.chat_title = $(".form-chat-edit-title").val();
        chat.chat_answer = $(".form-chat-edit-description").val();
        chat.chat_system = $(".form-chat-edit-system").val();
        chat.chat_modal = $(".form-chat-edit-modal").val();
        chat.chat_image = $(".form-chat-edit-avatar-temp").val();
        chat.chat_state = $(".form-chat-edit-state").prop("checked") ? "1" : "0";
        $zq.zAjax({
            type: "post",
            url: `${gptproxy}`,
            zqMethod: "updateChat",
            zqParams: JSON.stringify({
                "chat": chat
            }),
            beforeSend: function (xhr, ajaxConfig) {
                // $.zAjax({
                //     type: "post",
                //     url: `${auth_proxy}`,
                //     async: false,
                //     zqMethod: "isTokenExpired",
                //     success: function (data) {
                //         let _res=$zq.parseJSON(data);
                //         if(_res.code!=200||!_res.data){
                //             $(".btn-show-login").click();
                //             console.log(xhr);
                //             console.log(ajaxConfig);
                //             xhr.abort();
                //         }
                //     }
                // });
            },
            success: function (data) {
                $(`#chat-box-area-${chatId}`).find("p").each(function (index, element) {
                    if (index == 0) {
                        $(element).text(chat.chat_title);
                    } else if (index == 1) {
                        $(element).text(chat.chat_answer);
                    }
                })
                $(`.chat-box-area-avatar-${chatId}`).attr("src", chat.chat_image);
                for (let i = 0; i < webMetaData.chat.length; i++) {
                    let currentChat = webMetaData.chat[i];
                    if (currentChat.chat_id == chatId) {
                        currentChat.chat_title = chat.chat_title;
                        currentChat.chat_answer = chat.chat_answer;
                        currentChat.chat_system = chat.chat_system;
                        currentChat.chat_state = chat.chat_state;
                        currentChat.chat_image = chat.chat_image;
                        currentChat.chat_modal = chat.chat_modal;
                        break;
                    }
                }
                $(".form-chat-edit-cancel").click();
            }
        })
    }

    function chatDeleteCheck(chatId) {
        $(".btn-chat-delete-modal").click();
        $(".btn-delete-chat").off("click").on("click", function () {
            chatDelete(chatId);
            $(".btn-delete-close-chat").click();
        })
    }

    /**
     * 删除对话
     * @param chatId
     */
    function chatDelete(chatId) {
        $zq.zAjax({
            url: `${gptproxy}`,
            zqMethod: "deleteChatByChatId",
            zqParams: JSON.stringify({
                "chatId": chatId
            }),
            success: function (response) {
                let _data = $zq.parseJSON(response);
                if (_data.code == 200) {
                    for (let i = webMetaData.chat.length - 1; i > 0; i--) {
                        if (webMetaData.chat[i].chat_id == chatId) {
                            webMetaData.chat.splice(i, 1);
                            break;
                        }
                    }
                    alertSuccess("删除成功");
                    if ($(`#chat-box-area-${chatId}`).length) {
                        if ($('.chat-box-area').length === 0) {
                            createChat();
                        } else {
                            $(`#chat-box-area-${chatId}`).prev().click();
                        }
                        $(`#chat-box-area-sm-${chatId}`).remove();
                        $(`#chat-box-area-${chatId}`).remove();
                        $(`#chat-message-${chatId}`).remove();
                    }
                } else {
                    alertError(_data.msg);
                }
            }
        })
    }


    function createChat() {
        // todo
    }

    /**
     * 编辑对话信息
     * @param chatId
     */
    function openChatEdit(chatId) {
        let chats = webMetaData.chat;
        $.each(chats, function (index, chat) {
            if (chat.chat_id === chatId) {
                $(".form-chat-edit-btn").off("click").on("click", function () {
                    chatEdit(chatId);
                })
                $(".form-chat-edit-title").val(chat.chat_title);
                $(".form-chat-edit-description").val(chat.chat_answer);
                $(".form-chat-edit-system").val(chat.chat_system);
                let isModalFind = false;
                $(".form-chat-edit-modal").find("option").each(function (index, element) {
                    let val = $(element).val();
                    if (val == chat.chat_modal) {
                        $(".form-chat-edit-modal").val(val)
                        $(element).attr("selected", "selected");
                        isModalFind = true;
                        return;
                    }
                })
                if (!isModalFind) {
                    $(".form-chat-edit-modal").append(`<option value="${chat.chat_modal}" selected>${chat.chat_modal}</option>`);
                }
                if (chat.chat_state == "1") {
                    $(".form-chat-edit-state").prop("checked", true);
                } else {
                    $(".form-chat-edit-state").prop("checked", false);
                }
                if (chat.chat_image == undefined) {
                    if (chat.chat_modal.indexOf("deepseek") != -1) {
                        $(".form-chat-edit-avatar-img").attr("src", "https://hoppinzq.com/api/static/image/deepseek-3.png")
                        $(".form-chat-edit-avatar-temp").val("https://hoppinzq.com/api/static/image/deepseek-3.png")
                    }
                } else {
                    $(".form-chat-edit-avatar-img").attr("src", chat.chat_image)
                    $(".form-chat-edit-avatar-temp").val(chat.chat_image)
                }
                $(".btn-chat-edit-modal").click();
                return;
            }
        })
    }

    function initFirstChat() {
        $.zjax({
            url: `${gptproxy}`,
            zqMethod: "getChatId",
            zqIgnore: true,
            success: function (data) {
                let id = $zq.parseJSON(data).data;
                webMetaData.chatCurrentId = id;
                webMetaData.chat.push({
                    chat_id: id,
                    chat_user_id: webMetaData.userId,
                    chat_title: "ChatZQ",
                    chat_answer: "开始对话吧！",
                    chat_state: 0,
                    chatMessageList: [],
                    chat_modal: webMetaData.model,
                    chat_context: 6,
                    chat_system: ""
                })
                $(`.chat-left-title`).prepend(`<div @click="webMetaData.chatCurrentId='${id}',webMetaData.index = 1,$dispatch('change-active-chat',{chatId:'${id}',avatar_url:'https://hoppinzq.com/zui/static/picture/0.jpg',name:'HOPPINZQ'})"
                                 id="chat-box-area-${id}"
                                 class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
                                <div class="avatar h-10 w-10">
                                    <img class="rounded-full" src="https://hoppinzq.com/zui/static/picture/0.jpg"
                                         alt="avatar">
                                </div>
                                <div class="flex flex-1 flex-col">
                                    <div class="flex items-baseline justify-between space-x-1.5">
                                        <p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
                                            ChatZQ
                                        </p>
                                    </div>
                                    <div class="mt-1 flex items-center justify-between space-x-1">
                                        <p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
                                            开始对话吧！
                                        </p>
                                    </div>
                                </div>
                            </div>`);
                $(".chat-left-sm-title").prepend(`<div @click="webMetaData.chatCurrentId='${id}',webMetaData.index = 1,$dispatch('change-active-chat',{chatId:'${id}',avatar_url:'https://hoppinzq.com/zui/static/picture/0.jpg',name:'HOPPINZQ'})"
                                 class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
                                <div class="avatar h-10 w-10">
                                    <img class="rounded-full" src="https://hoppinzq.com/zui/static/picture/0.jpg"
                                         alt="avatar">
                                    <div class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-slate-300 dark:border-navy-700"></div>
                                </div>
                            </div>`);
                $(".chat-window").append2(`<div x-show="activeChat.chatId === '${id}'" id="chat-message-${id}"
                 x-transition:enter="transition-all duration-500 easy-in-out"
                 x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
                 x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" class="space-y-5">
                <div class="default-chat grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6 px-8">
                    <div class="col-span-12">
                        <div class="flex items-center justify-between py-5">
                            <h3 class="text-xl font-medium text-slate-800 dark:text-navy-50">
                                看板
                            </h3>
                            <a href="#"
                               @click="$('.default-chat').html('')"
                               class="border-b border-dotted border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                清理看板</a>
                        </div>
                        <div class="my-3"></div>
                        <div :class="$store.breakpoints.smAndUp && 'via-purple-300'"
                             class="card mt-12 bg-gradient-to-l from-pink-300 to-indigo-400 p-5 sm:mt-0 sm:flex-row">
                            <div class="flex justify-center">
                                <img class="sm:ml-4 -mt-16 h-40" style="margin-top: 1px" src="static/image/hoppinzq_ai5.png" alt="">
                            </div>
                            <div class="mt-2 flex-1 pt-2 text-center text-white sm:mt-0 sm:text-left">
                                <h3 class="text-xl">
                                    欢迎使用, <span class="font-semibold">HOPPIN的小AI</span>
                                </h3>
                                <p class="mt-2 leading-relaxed">
                                    本页面是一个展示对话和RAG综合能力的Demo，目前已接入DeepSeek。
                                    DeepSeek-V3和DeepSeek-R1均为671B模型。
                                    其中DeepSeek-R1模型在数学、代码以及各种复杂逻辑推理任务上推理效果优异，并为用户展现了完整的思考过程。
                                </p>
                                <p>目前支持<span class="font-semibold text-navy-700">64k</span>上下文长度，最大输入<span class="font-semibold text-navy-700">56k</span>，
                                    最大输出<span class="font-semibold text-navy-700">8k</span>。此外，前端页面已支持推理！</p>
                                <button class="btn mt-6 bg-slate-50 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80">
                                    查看
                                </button>
                            </div>
                        </div>
                        <div class="my-3 is-scrollbar-hidden overflow-x-auto">
                            <div class="flex w-max space-x-3 text-white">
                                <a href="#"
                                   class="tag h-7 rounded-full bg-primary text-xs+ text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                    🔥 对话
                                </a>
                                <a href="#"
                                   class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    🎨 图片
                                </a>
                                <a href="#"
                                   class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    🎵 音乐
                                </a>
                                <a href="#"
                                   class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    📊 PPT
                                </a>
                                <a href="#"
                                   class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    ✍ 代码
                                </a>
                                <a href="#"
                                   class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    📸 视频
                                </a>
                                <a href="#"
                                   class="tag h-7 rounded-full bg-slate-150 text-xs+ text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-700 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    😍 更多
                                </a>
                            </div>
                        </div>
                        <div class="mt-4 sm:mt-5 lg:mt-6">
                            <div class="flex h-8 items-center justify-between">
                                <h2 class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
                                    LLM文档
                                </h2>
                                <div x-data="{showAllAidocModal:false}">
                                    <a href="#" @click="showAllAidocModal = true" class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                        查看所有
                                    </a>
                                    <template x-teleport="#x-teleport-target">
                                      <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showAllAidocModal" role="dialog" @keydown.window.escape="showAllAidocModal = false">
                                        <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showAllAidocModal = false" x-show="showAllAidocModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" ></div>
                                        <div class="relative w-full max-w-2xl origin-bottom rounded-lg bg-white pb-4 transition-all duration-300 dark:bg-navy-700" x-show="showAllAidocModal" x-transition:enter="easy-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="easy-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" >
                                          <div class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                                            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                              AI文档 列表
                                            </h3>
                                            <button @click="showAllAidocModal = !showAllAidocModal" class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                              <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" ></path>
                                              </svg>
                                            </button>
                                          </div>
                                          <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
                                             <div class="mt-4" id="table-ai-doc"></div>
                                          </div>
                                          <div class="text-center">
                                            <button @click="showAllAidocModal = !showAllAidocModal" class="btn mt-4 border border-primary/30 bg-primary/10 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
                                              关闭
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </template>
                                </div>
                            </div>
                            <div class="swiper mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-5"
                                x-init="$nextTick(()=>$el._x_swiper= new Swiper($el,{slidesPerView: 'auto', spaceBetween:10, slidesPerGroup:1}))">
                                <div class="swiper-wrapper swiper-ai-doc"></div>
                            </div>
                        </div>
                        <div class="mt-4 sm:mt-5 lg:mt-6">
                            <div class="flex items-center justify-between space-x-2">
                                <h2 class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
                                    提示词
                                </h2>
                                <div x-data="{showAllAiPromptModal:false}">
                                    <a href="#" @click="showAllAiPromptModal = true" class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                        查看所有
                                    </a>
                                    <template x-teleport="#x-teleport-target">
                                      <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showAllAiPromptModal" role="dialog" @keydown.window.escape="showAllAiPromptModal = false">
                                        <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showAllAiPromptModal = false" x-show="showAllAiPromptModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" ></div>
                                        <div class="relative w-full max-w-2xl origin-bottom rounded-lg bg-white pb-4 transition-all duration-300 dark:bg-navy-700" x-show="showAllAiPromptModal" x-transition:enter="easy-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="easy-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" >
                                          <div class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                                            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                              提示词 列表
                                            </h3>
                                            <button @click="showAllAiPromptModal = !showAllAiPromptModal" class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                              <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" ></path>
                                              </svg>
                                            </button>
                                          </div>
                                          <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
                                             <div class="mt-4" id="table-ai-prompt"></div>
                                          </div>
                                          <div class="text-center">
                                            <button @click="showAllAiPromptModal = !showAllAiPromptModal" class="btn mt-4 border border-primary/30 bg-primary/10 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
                                              关闭
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </template>
                                </div>
                            </div>
                            <div class="swiper mt-3 grid grid-cols-1 gap-4 sm:mt-5 sm:grid-cols-3 sm:gap-5 lg:mt-6 lg:gap-6"
                                 x-init="$nextTick(()=>$el._x_swiper= new Swiper($el,{  slidesPerView: 'auto', spaceBetween:10, slidesPerGroup:1}))">
                                <div class="swiper-wrapper ai-prompt"></div>
                            </div>
                        </div>
                        <div class="mt-4 sm:mt-5 lg:mt-6">
                            <div class="flex items-center justify-between space-x-2">
                                <h2 class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
                                    MCP Server
                                </h2>
                                <div x-data="{showAllAiMCPModal:false}">
                                    <a href="#" @click="showAllAiMCPModal = true" class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                        查看所有
                                    </a>
                                    <template x-teleport="#x-teleport-target">
                                      <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5" x-show="showAllAiMCPModal" role="dialog" @keydown.window.escape="showAllAiMCPModal = false">
                                        <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showAllAiMCPModal = false" x-show="showAllAiMCPModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" ></div>
                                        <div class="relative w-full max-w-2xl origin-bottom rounded-lg bg-white pb-4 transition-all duration-300 dark:bg-navy-700" x-show="showAllAiMCPModal" x-transition:enter="easy-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="easy-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" >
                                          <div class="flex justify-between rounded-t-lg bg-slate-200 px-4 py-3 dark:bg-navy-800 sm:px-5">
                                            <h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
                                              MCP Server 列表
                                            </h3>
                                            <button @click="showAllAiMCPModal = !showAllAiMCPModal" class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                              <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" ></path>
                                              </svg>
                                            </button>
                                          </div>
                                          <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
                                             <div class="mt-4 scrollbar-sm" id="table-ai-mcp"></div>
                                          </div>
                                          <div class="text-center">
                                            <button @click="showAllAiMCPModal = !showAllAiMCPModal" class="btn mt-4 border border-primary/30 bg-primary/10 font-medium text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:border-accent-light/30 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
                                              关闭
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </template>
                                </div>
                            </div>
                            <div class="swiper mt-3 grid grid-cols-1 gap-4 sm:mt-5 sm:grid-cols-3 sm:gap-5 lg:mt-6 lg:gap-6" x-data="{expandedItem:null}"
                                 x-init="$nextTick(()=>$el._x_swiper= new Swiper($el,{slidesPerView: 'auto', spaceBetween:10, slidesPerGroup:1}))">
                                <div class="swiper-wrapper ai-mcp-server" ></div>
                            </div>
                        </div>
                         <div class="mt-4 sm:mt-5 lg:mt-6">
                            <div class="flex items-center justify-between space-x-2">
                                <h2 class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
                                    AI应用 = LLM + 提示词 + MCP Server（或ToolsCall）
                                </h2>
                                <a href="#"
                                   class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                    查看所有
                                </a>
                            </div>
                            <div class="swiper mt-3 grid grid-cols-1 gap-4 sm:mt-5 sm:grid-cols-3 sm:gap-5 lg:mt-6 lg:gap-6"
                                 x-init="$nextTick(()=>$el._x_swiper= new Swiper($el,{  slidesPerView: 'auto', spaceBetween:10, slidesPerGroup:1}))">
                                <div class="swiper-wrapper ai-application"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`, function () {
                    $(`#chat-box-area-${id}`).click();
                    $.getJSON('https://hoppinzq.com/api/static/json/ai_application.json', function (apps) {
                        $.each(apps, function (index, app) {
                            $(".ai-application").append2(`<div class="swiper-slide card p-2 pb-3 w-48">
                                    <div class="relative w-full">
                                        <img class="h-24 w-full rounded-xl object-cover object-center"
                                             src="${app.image}" alt="image">
                                        <div class="absolute inset-0 flex h-full w-full flex-col justify-between p-3">
                                            <div class="flex justify-end">
                                                <button class="btn h-7 w-7 rounded-full bg-black/20 p-0 hover:bg-black/30 focus:bg-black/30">
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-white"
                                                         fill="none"
                                                         stroke-width="2" viewbox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                                                    </svg>
                                                </button>
                                            </div>
                                            <div id="app-application-label-${app.id}-${id}"></div>
                                        </div>
                                    </div>
                                    <div class="mx-2 mt-3">
                                        <div class="flex justify-between text-xs">
                                            <div x-data="usePopper({
                                                     offset: 12,
                                                     placement: 'left',
                                                     modifiers: [
                                                        {name: 'preventOverflow', options: {padding: 10}}
                                                     ]
                                                  })" class="flex" @mouseleave="isShowPopper = false" @mouseenter="isShowPopper = true">
                                                <a href="#" x-ref="popperRef" class="text-slate-400 hover:underline dark:text-navy-300">${app.user.user_name}</a>
                                                <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                                    <div class="popper-box">
                                                        <div class="flex w-32 flex-col items-center rounded-md border border-slate-150 bg-white p-3 text-center dark:border-navy-600 dark:bg-navy-700">
                                                            <div class="avatar h-16 w-16">
                                                                <img class="rounded-full" src="${app.user.user_wx_image}"
                                                                     alt="avatar">
                                                            </div>
                                                            <p class="mt-2 font-medium tracking-wide text-slate-700 dark:text-navy-100">
                                                                微信：
                                                            </p>
                                                            <a href="#"
                                                               class="font-inter text-xs tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light">
                                                               ${app.user.user_wx}
                                                            </a>
                                                            <button
                                                                @click="$clipboard({
                                                                    content:'${app.user.user_wx}',
                                                                    success:()=>$notification({text:'复制微信号到剪切板成功',variant:'success',position:'center-top'}),
                                                                    error:()=>$notification({text:'复制失败，请手动微信号',variant:'error',position:'center-top'})
                                                                  })"
                                                                class="btn mt-4 h-6 rounded-full bg-primary px-4 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                                                添加好友
                                                            </button>
                                                        </div>
                                                        <div class="h-4 w-4" data-popper-arrow="">
                                                            <svg viewbox="0 0 16 9" xmlns="http://www.w3.org/2000/svg"
                                                                 class="absolute h-4 w-4" fill="currentColor">
                                                                <path class="text-slate-150 dark:text-navy-600"
                                                                      d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"></path>
                                                                <path class="text-white dark:text-navy-700"
                                                                      d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"></path>
                                                            </svg>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <p>
                                                <i class="fa-regular fa-heart"></i>
                                                <span>${app.like}</span>
                                            </p>
                                        </div>
                                        <a href="${app.link}" target="_blank"
                                           class="mt-1.5 text-base font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">
                                            ${app.name}
                                        </a>
                                        <div class="mt-2 flex items-center justify-between">
                                            <p class="text-xs text-slate-400 dark:text-navy-300">
                                                基于 ${app.model} 大模型
                                            </p>
                                        </div>
                                    </div>
                                </div>`, function () {
                                $.each(app.label, function (index, label) {
                                    $(`#app-application-label-${app.id}-${id}`).append(`
                                                <div class="badge rounded-full ${label.color} text-white text-slate-800 dark:bg-navy-600 dark:text-navy-50">
                                                    ${label.name}
                                                </div>`)
                                })
                            })
                        })
                    })
                    $.zjax({
                        url: `${gptproxy}`,
                        zqMethod: "publicProject",
                        success: function (res) {
                            let _docs = $zq.parseJSON(res);
                            new Gridjs.Grid({
                                columns: [
                                    '',
                                    '名称',
                                    '描述',
                                    '热度',
                                    '文档',
                                ],
                                search: true,
                                sort: true,
                                fixedHeader: true,
                                pagination: {
                                    limit: 5
                                },
                                data: _docs.map(doc => [
                                    new Gridjs.html(
                                        `<img class="h-8 w-8 rounded-lg object-cover object-center" src="${doc.icon}" alt="image">`
                                    ),
                                    doc.name,
                                    new Gridjs.html(`<p style="width: 100px" x-tooltip="'${doc.description.replaceAll('\n', '')}'" class="text-xs+ text-xs text-slate-400 dark:text-navy-300 line-clamp-2">${doc.description}</p>`),
                                    doc.views,
                                    new Gridjs.html(
                                        `<a target="_blank" href="https://${doc.sysDomain}.${doc.domainName}" class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                            访问文档
                                        </a>`
                                    )
                                ]),
                            }).render(document.getElementById('table-ai-doc'));
                            if (_docs.length > 0) {
                                $.each(_docs, function (index, doc) {
                                    if (index < 10) {
                                        $(".swiper-ai-doc").append(`<div class="swiper-slide card flex-row overflow-hidden">
                                            <div class="flex flex-1 flex-col justify-between p-4 sm:px-5">
                                                <div class="flex flex-row justify-normal">
                                                    <img class="h-12 w-12 rounded-lg object-cover object-center"
                                                             src="${doc.icon}" alt="image">
                                                    <h3 x-tooltip="'在线访问文档'" class="mt-3 ml-4 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
                                                        <a target="_blank" href="https://${doc.sysDomain}.${doc.domainName}">${doc.name}</a>
                                                    </h3>
                                                </div>
                                                <p x-tooltip="'${doc.description.replaceAll('\n', '')}'" class="text-xs+ mt-2 text-xs text-slate-400 dark:text-navy-300 line-clamp-2">${doc.description}</p>
                                                <div class="inline-space mt-4 flex flex-wrap">
                                                    <div class="cursor-pointer flex -space-x-px">
                                                        <a class="tag rounded-r-none bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"><i class="fa fa-eye"></i></a>
                                                        <a class="tag rounded-l-none bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                                          ${doc.views}
                                                        </a>
                                                    </div>
                                                    <div class="cursor-pointer flex -space-x-px">
                                                        <a class="tag rounded-r-none bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"><i class="fa fa-star"></i></a>
                                                        <a class="tag rounded-l-none bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                                          ${doc.collections}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>`);
                                    }
                                });
                            }
                        }
                    });
                    $.zjax({
                        url: `${gptproxy}`,
                        zqMethod: "publicPrompt",
                        success: function (res) {
                            let _prompts = $zq.parseJSON(res);
                            new Gridjs.Grid({
                                columns: [
                                    '标题',
                                    '描述',
                                    '标签',
                                    '提示词token',
                                    ''
                                ],
                                search: true,
                                sort: true,
                                fixedHeader: true,
                                pagination: {
                                    limit: 5
                                },
                                data: _prompts.map(prompt => [
                                    prompt.title,
                                    new Gridjs.html(`<p style="width: 100px" x-tooltip="'${prompt.description.replaceAll('\n', '')}'" class="text-xs+ text-xs text-slate-400 dark:text-navy-300 line-clamp-2">${prompt.description}</p>`),
                                    new Gridjs.html(tablePromptFormatLabel(prompt.label)),
                                    new Gridjs.html(`<p style="width: 100px" x-tooltip="'${prompt.token}'" class="text-xs+ text-xs text-slate-400 dark:text-navy-300 line-clamp-2">${prompt.token}</p>`),
                                    new Gridjs.html(
                                        `<div x-data="usePopper({
                                                     placement:'bottom-start',
                                                     offset:4,
                                                     modifiers: [
                                                        {name: 'preventOverflow', options: {padding: 10}}
                                                     ]
                                                  })" class="flex" @mouseleave="isShowPopper = false" @mouseenter="isShowPopper = true">
                                                    <p class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">查看提示词</p>
                                                    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper &amp;&amp; 'show'">
                                                        <div class="popper-box">
                                                            <div class="flex flex-col items-center rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700">
                                                                                                        <div class="code-wrapper pt-4">
                                                        <button class="btn border border-success/30 bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25" @click="$clipboard({
                                                                content:document.querySelector('#prompt-content-table-${prompt.id}').innerText,
                                                                    success:()=>$notification({text:'复制提示词到剪切板成功',variant:'success',position:'center-top'}),
                                                                error:()=>$notification({text:'复制错误，请手动复制',variant:'error'})
                                                            })">复制提示词</button>
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg mt-5" id="prompt-content-table-${prompt.id}">
${prompt.content}
</pre>
                                                    </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>`
                                    ),
                                ]),
                            }).render(document.getElementById('table-ai-prompt'));
                            $.each(_prompts, function (index, prompt) {
                                $(".ai-prompt").append2(`<div class="swiper-slide card px-4 pb-4 sm:px-5">
                                        <div class="my-3 flex h-8 items-center justify-between">
                                            <h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                                                ${prompt.title}
                                            </h2>
                                            <label class="inline-flex items-center space-x-2">
                                                <span class="text-xs text-slate-400 dark:text-navy-300">展示提示词</span>
                                                <input @change="helpers.toggleCode" class="show-prompt form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white" type="checkbox">
                                            </label>
                                        </div>
                                        <div class="max-w-xl">
                                            <p x-tooltip="'${prompt.description}'">
                                                ${prompt.description}
                                            </p>
                                            <div class="mt-5">
                                                <div class="inline-space mt-5 prompt-label-${prompt.id}"></div>
                                            </div>
                                        </div>
                                        <div class="code-wrapper pt-4 hidden">
                                                        <p class="my-1">提示词token：${prompt.token}</p>
                                                        <button class="btn border border-success/30 bg-success/10 font-medium text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25" @click="$clipboard({
                                                                content:document.querySelector('#prompt-content-${prompt.id}').innerText,
                                                                    success:()=>$notification({text:'复制提示词到剪切板成功',variant:'success',position:'center-top'}),
                                                                error:()=>$notification({text:'复制错误，请手动复制',variant:'error'})
                                                            })">复制提示词</button>
<pre class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg mt-5" id="prompt-content-${prompt.id}">
${prompt.content}
</pre>
                                                    </div>
                                    </div>`, function () {
                                    let labels = prompt.label;
                                    if (labels.length) {
                                        let _labels = $zq.parseJSON(labels);
                                        $.each(_labels, function (i, l) {
                                            $(`.prompt-label-${prompt.id}`).append(getRandomBadge(l));
                                        })
                                    }
                                })
                            })
                        }
                    });
                    $.zjax({
                        url: `${gptproxy}`,
                        zqMethod: "publicMcp",
                        success: function (res) {
                            let _mcptypes = $zq.parseJSON(res);
                            let mcpServers = []
                            $.each(_mcptypes, function (index, mcptype) {
                                let mcps = mcptype.publicMCPPOList;
                                let $mcphtml = "";
                                $.each(mcps, function (i, mcp) {
                                    mcpServers.push(mcp);
                                    $mcphtml += `<div class="flex items-center space-x-3">
                                                    <div>
                                                        <a href="${mcp.url}" target="_blank" class="text-slate-700 dark:text-navy-100 border-b border-dotted border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
                                                            ${mcp.name}
                                                        </a>
                                                        <p x-tooltip="'${mcp.description.replaceAll('\"', '“')}'" class="mt-2 text-xs text-slate-400 line-clamp-1 dark:text-navy-200">
                                                            ${mcp.description}
                                                        </p>
                                                        <p x-tooltip="'${mcp.remark.replaceAll('\"', '”')}'" class="mt-2 text-xs text-slate-400 line-clamp-1 dark:text-navy-200">
                                                            ${mcp.remark}
                                                        </p>
                                                    </div>
                                                </div>
                                            <div class="mx-1 my-1 h-px bg-slate-200 dark:bg-navy-500"></div>`;
                                })
                                $(".ai-mcp-server").append(`<div x-data="{expanded:false}" class="swiper-slide card p-2 pb-3 overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500">
                                      <div class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5" >
                                        <div class="flex items-center space-x-3.5 tracking-wide outline-none transition-all" >
                                          <div class="avatar h-10 w-10">
                                            <div class="is-initial rounded-full bg-warning uppercase text-white" >
                                              MCP
                                            </div>
                                          </div>
                                          <div>
                                            <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
                                              ${mcptype.typeName}
                                            </p>
                                            <p class="text-xs text-slate-500 dark:text-navy-300">
                                              ${mcptype.typeDescription}
                                            </p>
                                          </div>
                                        </div>
                                        <button @click="expanded = !expanded" class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                          <i :class="expanded && '-rotate-180'" class="fas fa-chevron-down text-sm transition-transform"></i>
                                        </button>
                                      </div>
                                      <div x-collapse x-show="expanded">
                                        <div class="px-4 py-4 sm:px-5 space-y-4 scrollbar-sm" style="max-height: 275px;overflow-y: scroll;">${$mcphtml}</div>
                                      </div>
                                    </div>`)
                                if (index == _mcptypes.length - 1) {
                                    new Gridjs.Grid({
                                        columns: [
                                            '名称',
                                            '描述',
                                            '备注',
                                            '开源地址',
                                        ],
                                        search: true,
                                        sort: true,
                                        fixedHeader: true,
                                        pagination: {
                                            limit: 5
                                        },
                                        data: mcpServers.map(mcpServer => [
                                            mcpServer.name,
                                            new Gridjs.html(`<p style="width: 120px" x-tooltip="'${mcpServer.description.replaceAll('\n', '')}'" class="text-xs+ text-xs text-slate-400 dark:text-navy-300 line-clamp-2">${mcpServer.description}</p>`),
                                            new Gridjs.html(`<p style="width: 100px" x-tooltip="'${mcpServer.remark.replaceAll('\n', '')}'" class="text-xs+ text-xs text-slate-400 dark:text-navy-300 line-clamp-2">${mcpServer.remark}</p>`),
                                            new Gridjs.html(
                                                `<a style="width: 100px" href="${mcpServer.url}" target="_blank" class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">${mcpServer.url}</a>`
                                            )
                                        ]),
                                    }).render(document.getElementById('table-ai-mcp'));
                                }
                            })
                        }
                    });
                });
            }
        })
    }

    function tablePromptFormatLabel(labels) {
        let $label = $(`<div class="flex space-x-2"></div>`);
        if (labels.length) {
            let _labels = $zq.parseJSON(labels);
            $.each(_labels, function (i, l) {
                $label.append(getRandomBadge(l));
            })
        }
        return $label.get(0).outerHTML;
    }

    function initKnowledge() {
        $.zjax({
            url: `${gptproxy}`,
            zqMethod: "queryKnowledge",
            success: function (data) {
                let _res = $zq.parseJSON(data);
                if (_res.code == 200) {
                    webMetaData.knowledge = _res.data;
                    let knowledge = webMetaData.knowledge;
                    $(".main-knowledge-name").text(knowledge.knowledge_name);
                    $.each(knowledge.knowledgeAttrList, function (index, attr) {
                        $(".form-qa-attr").append(`<option value="${attr.knowledge_attr_id}">${attr.knowledge_attr_name}</option>`);
                        let $li = $(`<li x-data="{expanded:false}" id="${attr.knowledge_attr_id}" data-key="${attr.knowledge_attr_key}"></li>`);
                        $li.append(`<div tabindex="0" class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                        <button @click="expanded = !expanded"
                                                class="btn mr-1 h-5 w-5 rounded-lg p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                 class="h-4.5 w-4.5 transition-transform"
                                                 :class="expanded && 'rotate-90'" viewbox="0 0 20 20"
                                                 fill="currentColor">
                                                <path fill-rule="evenodd"
                                                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                      clip-rule="evenodd"></path>
                                            </svg>
                                        </button>
                                        <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
                                             viewbox="0 0 20 20" fill="currentColor">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
                                        </svg>
                                        <span>${attr.knowledge_attr_name}</span>
                                    </div>`)
                        let $attrUl = $(`<ul x-show="expanded" x-collapse="" class="pl-4">`);
                        $.each(attr.knowledgeAttrLabelList, function (index, label) {
                            $(".swiper-knowledge").append(`<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
                                    <div onclick="$('.chat-info-btn').click();$('#tabKnowledge').click();"
                                    class="cursor-pointer h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
                                        <img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
                                             src="static/picture/200x200.png" alt="avatar">
                                    </div>
                                    <p class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
                                        ${label.knowledge_attr_label_name}
                                    </p>
                                </div>`)
                            $attrUl.append(`<li>
                                                <div tabindex="0"
                                                     class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
                                                    <div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
                                                    <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
                                                    </svg>
                                                    <span>${label.knowledge_attr_label_name}</span>
                                                </div>
                                            </li>`)
                        })
                        $li.append($attrUl);
                        $(".knowledge-attr-label").append($li);
                        if (index == knowledge.knowledgeAttrList.length - 1) {
                            let $qaLabelSelect = new TomSelect(".form-qa-label", {
                                plugins: ['remove_button'],
                                create: false,
                                valueField: 'id',
                                labelField: 'title',
                                searchField: 'title',
                                onItemAdd: function (item) {
                                }
                            })
                            webMetaData.tomSelect.qaLabelSelect = $qaLabelSelect;
                            let $qaAttrSelect = new Tom(".form-qa-attr", {
                                create: true,
                                sortField: {field: 'text', direction: 'asc'},
                                onChange: function (item) {
                                    $qaLabelSelect.clear();
                                    $qaLabelSelect.clearOptions();
                                    if (item != "0") {
                                        $.each(webMetaData.knowledge.knowledgeAttrList, function (index, attr) {
                                            if (attr.knowledge_attr_id == item) {
                                                $.each(attr.knowledgeAttrLabelList, function (index, label) {
                                                    $qaLabelSelect.addOption({
                                                        id: label.knowledge_attr_label_id,
                                                        title: label.knowledge_attr_label_name
                                                    });
                                                    $qaLabelSelect.addItem(label.knowledge_attr_label_id);
                                                });
                                                return;
                                            }
                                        })
                                    }
                                }
                            });
                            webMetaData.tomSelect.qaAttrSelect = $qaAttrSelect;
                        }
                    })
                }
            }
        })
        initAttrDom();
        initQaTable();
        initDocTable();
        initDocFile();
        initKnowledgeDom();
    }

    function initDocFile() {
        $zq(".knowledge-doc-upload").on('FilePond:addfile', function (event) {
            let fileName = event.detail.file.filename;
            let fileSize = event.detail.file.fileSize;
            let fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
            if ("PDF、DOC、DOCX、XLS、XLSX、PPT、PPTX、MD、TXT、PNG、JPG、JPEG、CSV".indexOf(fileType.toUpperCase()) == -1) {
                alertError("不支持的文件格式");
                return;
            }
            if ("PDF、DOCX、DOC、PPT、PPTX".indexOf(fileType.toUpperCase()) != -1 && fileSize >= 1024 * 1024 * 200) {
                alertError("PDF、DOCX、DOC、PPT、PPTX只允许上传不超过200MB的文件");
                return;
            }
            if ("TXT、MD".indexOf(fileType.toUpperCase()) != -1 && fileSize >= 1024 * 1024 * 10) {
                alertError("TXT、MD只允许上传不超过10MB的文件");
                return;
            }
            if ("XLS、XLSX、PNG、JPG、JPEG、CSV".indexOf(fileType.toUpperCase()) != -1 && fileSize >= 1024 * 1024 * 20) {
                alertError("其他格式文件只允许上传不超过20MB的文件");
                return;
            }
            let form = new FormData();
            form.append("file", event.detail.file.file);
            $.zAFjax({
                url: `${gptip}/openai/uploadFile2`,
                method: "POST",
                processData: false,
                contentType: false,
                data: form,
                success: function (_res) {
                    if (_res.code == 200) {
                        $(".knowledge-doc-file-show").append2(`<a href="${_res.data}" class="inline-flex items-center space-x-1 pt-2 text-slate-600 transition-colors hover:text-primary dark:text-navy-100 dark:hover:text-accent">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    <span>${fileName}</span>
                                </a>`, function () {
                            $.zjax({
                                type: "post",
                                url: `${gptproxy}`,
                                zqMethod: "addDoc",
                                zqParams: JSON.stringify({
                                    "docInsertDTO": {
                                        "fileName": fileName,
                                        "fileType": fileType.toUpperCase(),
                                        "fileUrl": _res.data
                                    }
                                }),
                                storageCache: true,
                                success: function (response) {
                                    let data = $zq.parseJSON(response);
                                    if (data.code == 200) {
                                        $(`.knowledge-doc-file-show`).append2(`<div class="card px-4 pb-5 sm:px-5">
                        <div class="my-3 flex h-8 items-center justify-between">
                            <h2 class="text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
                                文件处理中...
                            </h2>
                        </div>
                        <div class="space-y-4">
                            <div class="flex items-center space-x-3 doc-status">
                                <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-warning/10">
                                    <i class="fa-solid fa-spinner fa-spin text-xl text-warning dark:text-accent-light"></i>
                                </div>
                                <div class="grow space-y-1">
                                    <div class="flex justify-between">
                                        <p class="font-medium">上传中</p>
                                        <p class="text-warning">10%</p>
                                    </div>
                                    <div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
                                        <div class="w-1/12 rounded-full bg-warning"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3 doc-status doc-status-parsing hidden">
                                <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10 dark:bg-accent-light/10">
                                    <i class="fa-solid fa-spinner fa-spin text-xl text-primary dark:text-accent-light"></i>
                                </div>
                                <div class="grow space-y-1">
                                    <div class="flex justify-between">
                                        <p class="font-medium">解析中</p>
                                        <p class="text-primary dark:text-accent-light">25%</p>
                                    </div>
                                    <div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
                                        <div class="w-3/12 rounded-full bg-primary dark:bg-accent"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3 doc-status doc-status-indexing hidden">
                                <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-success/10">
                                    <i class="fa-solid fa-spinner fa-spin text-xl text-success dark:text-accent-light"></i>
                                </div>
                                <div class="grow space-y-1">
                                    <div class="flex justify-between">
                                        <p class="font-medium">创建索引中</p>
                                        <p class="text-success">50%</p>
                                    </div>
                                    <div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
                                        <div class="w-6/12 rounded-full bg-success"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3 doc-status doc-status-success hidden">
                                <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-success/10">
                                    <i class="fa-regular fa-circle-check text-xl text-success"></i>
                                </div>
                                <div class="grow space-y-1">
                                    <div class="flex justify-between">
                                        <p class="font-medium">解析成功</p>
                                        <p class="text-success">100%</p>
                                    </div>
                                    <div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
                                        <div class="w-full rounded-full bg-success"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center space-x-3 doc-status doc-status-fail hidden">
                                <div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-error/10">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </div>
                                <div class="grow space-y-1">
                                    <div class="flex justify-between">
                                        <p class="font-medium">失败，请联系hoppinzq</p>
                                        <p class="text-error">0%</p>
                                    </div>
                                    <div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
                                        <div style="width: 0px"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`, function () {
                                            let docId = data.data;
                                            let tdf = setInterval(function () {
                                                $.zjax({
                                                    url: `${gptproxy}`,
                                                    zqMethod: "getDocStatus",
                                                    zqParams: JSON.stringify({
                                                        docId: docId
                                                    }),
                                                    success: function (res) {
                                                        let _res = $zq.parseJSON(res);
                                                        if (_res.code == 200) {
                                                            let status = _res.data.fileStatus;
                                                            if (status == "解析失败" || status == "创建索引失败" || status == "失败") {
                                                                if (!$(".doc-status").hasClass("hidden")) {
                                                                    $(".doc-status").addClass("hidden")
                                                                }
                                                                $(".doc-status-fail").removeClass("hidden");
                                                                clearInterval(tdf);
                                                            } else {
                                                                if (status == "解析中") {
                                                                    if (!$(".doc-status").hasClass("hidden")) {
                                                                        $(".doc-status").addClass("hidden")
                                                                    }
                                                                    $(".doc-status-parsing").removeClass("hidden");
                                                                } else if (status == "创建索引中") {
                                                                    if (!$(".doc-status").hasClass("hidden")) {
                                                                        $(".doc-status").addClass("hidden")
                                                                    }
                                                                    $(".doc-status-indexing").removeClass("hidden");
                                                                } else if (status == "发布成功") {
                                                                    if (!$(".doc-status").hasClass("hidden")) {
                                                                        $(".doc-status").addClass("hidden")
                                                                    }
                                                                    $(".doc-status-success").removeClass("hidden");
                                                                    clearInterval(tdf);
                                                                    alertSuccess("解析文件成功，刷新页面生效");
                                                                }
                                                            }
                                                        } else {
                                                            alertError(_res.msg);
                                                            clearInterval(tdf);
                                                        }
                                                    }
                                                })
                                            }, 2000)
                                        });
                                    } else {
                                        alertError(data.msg);
                                    }
                                }
                            })


                        });
                    } else {
                        alertError("文件上传失败，请检查文件服务器是否正常");
                    }
                }
            });
        });
    }

    function initAttrDom() {
        let $attrLabelSelect = new TomSelect(".form-attr-label", {
            plugins: ['remove_button'],
            create: true,
            valueField: 'id',
            onItemAdd: function (item) {
            }
        })
        webMetaData.tomSelect.attrLabelSelect = $attrLabelSelect;

        $(".btn-attr-modal-add").off("click").on("click", function () {
            let attrKey = $("#form-attr-key").val();
            if (attrKey.length == 0) {
                alertError("key不能为空");
                $("#form-attr-key").focus();
                return;
            }
            let attrName = $("#form-attr-name").val();
            if (attrName.length == 0) {
                alertError("name不能为空");
                $("#form-attr-name").focus();
                return;
            }
            let params = {
                "key": attrKey,
                "name": attrName
            }
            if (webMetaData.tomSelect.attrLabelSelect != undefined) {
                let attrId = webMetaData.tomSelect.attrLabelSelect.getValue();
                if (attrId.length) {
                    params.labels = attrId;
                }
            }
            $.zAjax({
                type: "post",
                url: `${gptproxy}`,
                zqMethod: "addKnowledge",
                zqParams: JSON.stringify({
                    "knowledgeInsertDTO": params
                }),
                success: function (response) {
                    let _res = $zq.parseJSON(response);
                    if (_res.code == 200) {
                        alertSuccess("新增成功");
                        $(".btn-attr-modal-cancel").click();
                    } else {
                        alertError("新增失败");
                    }
                }
            })
        })
    }

    function initKnowledgeDom() {
        $(".btn-knowledge-attr-create").click(function () {
            $(".btn-show-login").click();
        })
    }

    function initQaTable() {
        webMetaData.gridTable.qaTable = new Gridjs.Grid({
            columns: ['问题', '回答', '属性', '标签', '操作'],
            pagination: {
                limit: 5,
                server: {
                    url: (prev, page, limit) => `${prev}&params={"pageParam":{ "pageSize":"${limit}","pageNo":"${page + 1}"}}`
                }
            },
            server: {
                url: `${gptproxy}?method=queryQA`,
                headers: {
                    "X-ZQ-Ignore": "1"
                },
                then: data => data.data.list.map(qa => [
                    qa.question,
                    qa.answer,
                    new Gridjs.html(`${qa.attr_str == null ? "" : `<div class="badge rounded-full bg-info/10 text-info dark:bg-info/15">${qa.attr_str}</div>`}`),
                    new Gridjs.html(tableKnowledgeQaFormatLabel(qa.label_str)),
                    new Gridjs.html(`<div class="flex justify-center space-x-2">
                            <button @click="editQA('${qa.qa_id}'),$notification({text:'该功能前端未实现，有需求请打开zwagger文档，然后自行调用editQA接口',variant:'info',position:'center-top'})"
                                class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
                                <i class="fa fa-edit"></i>
                            </button>
                             <div x-data="usePopper({
                                       offset: 12,
                                       placement: 'right-start',
                                       modifiers: [
                                          {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
                                          {name: 'preventOverflow', options: {padding: 10}}
                                       ]
                                    })"
                                    @click.outside="isShowPopper && (isShowPopper = false)"
                                    class="flex">
                                    <button class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
                                      x-ref="popperRef"
                                      @click="isShowPopper = !isShowPopper">
                                      <i class="fa fa-trash-alt"></i>
                                    </button>
                                    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
                                      <div class="popper-box max-w-xs">
                                        <div class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700">
                                          <h3 class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
                                            确定删除QA？
                                          </h3>
                                          <p class="mt-2 text-xs text-slate-400 dark:text-navy-300">
                                            问题：${qa.question}
                                          </p>
                                          <div class="mt-3 flex space-x-2">
                                            <a href="#"
                                              @click="isShowPopper = !isShowPopper,deleteQA('${qa.qa_id}')"
                                              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                              删除
                                            </a>
                                            <a href="#" @click="isShowPopper = !isShowPopper"
                                              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                              取消
                                            </a>
                                          </div>
                                        </div>
                                        <div class="h-4 w-4" data-popper-arrow>
                                          <svg viewBox="0 0 16 9"
                                            xmlns="http://www.w3.org/2000/svg"
                                            class="absolute h-4 w-4"
                                            fill="currentColor">
                                            <path class="text-slate-150 dark:text-navy-600"
                                              d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"/>
                                            <path class="text-white dark:text-navy-700"
                                              d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"/>
                                          </svg>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

                        </div>`)
                ]),
                total: data => data.data.total
            }
        }).render(document.getElementById('table-knowledge-qa'));
    }

    function initDocTable() {
        webMetaData.gridTable.docTable = new Gridjs.Grid({
            columns: ['文件名', '类型', '下载'],
            pagination: {
                limit: 5,
                server: {
                    url: (prev, page, limit) => `${prev}&params={"pageParam":{ "pageSize":"${limit}","pageNo":"${page + 1}"}}`
                }
            },
            server: {
                url: `${gptproxy}?method=queryDoc`,
                headers: {
                    "X-ZQ-Ignore": "1"
                },
                then: data => data.data.list.map(doc => [
                    doc.doc_name,
                    doc.doc_type,
                    new Gridjs.html(`<a href="${doc.doc_url}" target="_blank"
                                class="btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
                                  <i class="fa fa-download"></i>
                            </a>`)
                ]),
                total: data => data.data.total
            }
        }).render(document.getElementById('table-knowledge-doc'));
    }

    function openQAModal() {
        $("#form-qa-question").val("");
        $("#form-qa-answer").val("");
        $(".btn-qa-modal-add").off("click").on("click", function () {
            let question = $("#form-qa-question").val();
            if (question.length == 0) {
                alertError("问题不能为空");
                $("#form-qa-question").focus();
                return;
            }
            let answer = $("#form-qa-answer").val();
            if (answer.length == 0) {
                alertError("答案不能为空");
                $("#form-qa-answer").focus();
                return;
            }
            let params = {
                "question": question,
                "answer": answer
            }
            if (webMetaData.tomSelect.qaAttrSelect != undefined && webMetaData.tomSelect.qaLabelSelect != undefined) {
                let attrId = webMetaData.tomSelect.qaAttrSelect.getValue();
                if (attrId != "0") {
                    let labels = webMetaData.tomSelect.qaLabelSelect.getValue();
                    params.knowledgeAttrInsertDTOS = [];
                    params.knowledgeAttrInsertDTOS[0] = {
                        "attrId": attrId,
                        "labelIds": labels
                    }
                }
            }
            $.zAjax({
                type: "post",
                url: `${gptproxy}`,
                zqMethod: "addQA",
                zqParams: JSON.stringify({
                    "qaInsertDTO": params
                }),
                beforeSend: function () {
                    $(".chat-qa-title-loader").css("display", "block");
                },
                complete: function () {
                    $(".chat-qa-title-loader").css("display", "none");
                },
                success: function (response) {
                    let _res = $zq.parseJSON(response);
                    if (_res.code == 200) {
                        alertSuccess("新增成功");
                        $(".btn-qa-modal-cancel").click();
                    } else {
                        alertError("新增失败");
                    }
                }
            })
        });
    }

    function editQA(qaId) {

    }

    function deleteQA(qaId) {
        $zq.zAjax({
            url: `${gptproxy}`,
            zqMethod: "deleteQA",
            zqParams: JSON.stringify({
                "qaId": qaId
            }),
            success: function (response) {
                let _res = $zq.parseJSON(response);
                if (response.code == 200) {
                    alertSuccess("删除成功");
                } else {
                    alertError(_res.msg);
                }
            }
        })
    }

    function tableKnowledgeQaFormatLabel(labels) {
        let $label = $(`<div class="flex space-x-2"></div>`);
        if (labels != undefined) {
            $.each(labels.split(" "), function (index, label) {
                $label.append(`<div class="badge rounded-full border border-success text-success">${label}</div>`)
            })
        }
        return $label.get(0).outerHTML;
    }

    function getRandomBadge(text) {
        let colors = ["primary", "secondary", "info", "success", "warning", "error"]
        let randomInt = Math.floor(Math.random() * 6);
        let color = colors[randomInt];
        return `<div class="badge bg-${color}/10 text-${color} dark:bg-${color}-light/15 dark:text-${color}-light">${text}</div>`
    }
</script>
<script src="static/js/recordmp3.js"></script>
<script>
    var recorder;

    $(".btn-audio").click(function () {
        recorder = new MP3Recorder({
            debug: true,
            funOk: function () {

            },
            funCancel: function (msg) {
                recorder = null;
            }
        });

        console.log($(".chat-file-upload").val());

    })

    function funStart() {
        recorder.start();
    }

    function funStop() {
        recorder.stop();
        recorder.getMp3Blob(function (blob) {
            //log('导出成功');
            mp3Blob = blob;
            var url = URL.createObjectURL(mp3Blob);
            var div = document.createElement('div');
            var au = document.createElement('audio');
            var hf = document.createElement('a');

            au.controls = true;
            au.src = url;
            hf.href = url;
            hf.download = new Date().toISOString() + '.wav';
            hf.innerHTML = hf.download;
            div.appendChild(au);
            div.appendChild(hf);
            sendLuyin(url, "right");
            var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
            addTempFile(mp3Name, blob.length, url);
            //funUpload();
        });
    }

    function sendLuyin(url, postion) {
        if ($(".default-chat").length) {
            $(".default-chat").remove();
        }
        showChatMessage(`<audio class='audio-player' controls hidden>
                            <source src='${url}' type="audio/mpeg">
                        </audio>`, `chat-message-${webMetaData.chatCurrentId}`, webMetaData.index, null, true, true, '', function () {
            $('audio.audio-player').each(function () {
                var audio = $(this);
                var container = $('<div class="audio-player-container"></div>');
                var player = $('<div class="audio-player"></div>');
                var bars = $
                (
                    '<div class="audio-bars">' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '<div class="audio-bar"></div>' +
                    '</div>'
                );
                audio.removeClass('audio-player');
                container.append(player);
                container.insertAfter(audio);
                player.append(bars);
                audio[0].onplay = function () {
                    player.addClass('on').removeClass('off');
                };
                audio[0].onpause = function () {
                    player.addClass('off').removeClass('on');
                };
                bars.on('click', function () {
                    if (audio[0].paused == false) {
                        audio[0].pause();
                    } else {
                        audio[0].play();
                    }
                });

                if (audio[0].paused == false) {
                    player.addClass('on').removeClass('off');
                } else {
                    player.addClass('off').removeClass('on');
                }
            });
            soundControl();
        })
    }

    function funUpload() {
        var fd = new FormData();
        var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.wav');
        fd.append('mp3Name', mp3Name);
        fd.append('file', mp3Blob);
        $.ajax({
            url: "saveFile",
            type: "post",
            data: fd,
            processData: false,
            contentType: false,
            success: function (data) {
                var mp3_url = ip + "chat/" + data;
                sendLuyin(mp3_url, "left");
            }
        })
    }


    function soundControl() {
        var audios = document.getElementsByTagName("audio");

        // 暂停函数
        function pauseAll() {
            var self = this;
            [].forEach.call(audios, function (i) {
                // 将audios中其他的audio全部暂停
                i !== self && i.pause();
            })
        }

        // 给play事件绑定暂停函数
        [].forEach.call(audios, function (i) {
            i.addEventListener("play", pauseAll.bind(i));
        });
    }
</script>
</body>
</html>
